BOOTSTRAP

Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. It uses HTML, CSS, and Javascript.

Why Use Bootstrap?

Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. It uses HTML, CSS, and Javascript.

  • Mobile first approach: Bootstrap 3 framework consists of Mobile first styles throughout the entire library instead of them in separate files.
  • Browser Support: It is supported by all popular browsers.
  • Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation
  • Responsive design: Bootstrap’s responsive CSS adjusts to Desktops, Tablets and Mobiles. More about the responsive design is in the chapter Bootstrap Responsive Design.
  • Provides a clean and uniform solution for building an interface for developers.
  • It contains beautiful and functional built-in components which are easy to customize.
  • And best of all it is an open source.
bootstrap image

Creating Your First Web Page using Bootstrap

Create an HTML page

You need to create a simple HTML template as a base where we will use Bootstrap. For that, the first thing you want to do is create a folder on your computer or server for the project files. In this case, we will simply call it bootstrap .Here, create a new text file and call it index.html. Open it with a text editor of your choice and then pasete the followingcode into it.

<html lang=“en”>
<head>
 
<title>Sample</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
 
</head>
<body>
 
 
</body>
</html>

Load Bootstrap via CDN or host it locally

1.Host Bootstrap Locally

One way is to set up Bootstrap is to download it to your hard drive and use the files locally. Here, be sure to get the compiled CSS and JS files. You don’t need the source files.

Once you downloaded, unzip the file and copy its contents into the same directory as index.html . After that, you can load the Bootstrap CSS into your project like this:

<link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css”>

2.Load Bootstrap via CDN

Bootstrap consists mainly of style sheets and scripts. As such, they can be loaded in the header and footer of your web page like other assets such as custom fonts.

To use Bootstrap into your page, simply paste the code below into the section of your template.

<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous”>
 

Include jQuery

You need also to load the jQuery library to get the full functionality of Bootstrap.You can load it remotely or host it locally.

Place the code in <body>

<script src=“https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=“sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=“anonymous”></script>
or 
 download jQuery then unzip, and put it into the project folder. Then, include it in the same place as your file in this way:
<script src=“jquery-3.3.1.min.js”></script>
 
 

Load Bootstrap JavaScript

Load Javascript in the sameway as jquery

Add Remotely

<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=“sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=“anonymous”></script>
 
Add Locally
 
<script src=“bootstrap/js/bootstrap.min.js”></script>
 

Combine All

Remote Solution

<html lang=“en”>
<head>
 
<title> Sample</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous”>
 
</head>
<body>
 
<script src=“https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=“sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=“anonymous”></script>
<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=“sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=“anonymous”></script>
</body>
</html>

Local Solution

<html lang=“en”>
<head>
 
<title> Sample </title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css”>
 
</head>
<body>
 
 
<script src=“jquery-3.3.1.min.js”></script>
<script src=“bootstrap/js/bootstrap.min.js”></script>
</body>
</html>

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

ezywebbuilding will use the information you provide on this form to be in touch with you and to provide updates and marketing.