How to use Bootstrap?

By  ShC    230 - 23 July, 20
how-to-use-bootstrap

Share article on social media


Bootstrap is free to use and it's as easy to implement as learning HTML but firstly we should know that what actually is Bootstrap? then we'll move forward to how to use bootstrap?

What is Bootstrap?

Bootstrap is a free front end framework. The most popular CSS framework which is used to develop responsive and mobile-first web pages.

Bootstrap provides you the predefined classes, an easy and magical way to create web pages.

Bootstrap has HTML, CSS and Javascript as the key components to design forms, tables, buttons, modals and so on. Bootstrap is basically used to make responsive designs to adjust to phones, laptops, and tablets. Easy to learn and implement. Bootstrap also provides Javascript plugins which makes it better to use. Bootstrap 5 is the latest version of Bootstrap available with new components, and better responsiveness.

The Main difference between Bootstrap 3, 4 and Bootstrap 5 is, instead of jQuery - Bootstrap 5 is shifted to Javascript.

Many websites are still using Bootstrap 3 as it is the most stable version of Bootstrap and they require support for IE9(Internet Explorer 9) and IE 8. If you require support for IE9 and IE 8, you can use Bootstrap 3, as Bootstrap 4 and  doesn't support IE9 and IE 8 browsers. Many of the web designers are using Bootstrap in their projects, even companies are using Bootstrap for their front end work.

Bootstrap Responsive Web Design

What is Responsive Web Design?

Responsive Web Design is creating such web designs which looks perfect on Mobiles, Tablets and other devices.

Lets start with Bootstrap

There are some methods to answer your query - how to use bootstrap in your project?

such as, download the bootstrap from getbootstrap.com and unzip the file and then include it in your project.

The second way is to use it from CDN (Content delivery network).

What to do next?

Create a webpage and include  <meta charset="utf-8"> in your head tag as it's a character set.

For the proper rendering of webpage and touch zooming include in your head tag after character tag.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Now use CDN for Bootstrap. Just copy-paste the line of codes into your webpage head tag, making it simple for you or else you can get CDN from getbootstrap.com

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


Instruction: These CDN's are for Bootstrap 4. If you want to use Bootstrap 3 or 5 you can get it from getbootstrap.com

 

The benefit of using Bootstrap from CDN is that the website will load faster as it is loaded from the cache.

 

Tada!! Now you're ready to use Bootstrap in your projects.

 

Let me demonstrate how the whole code looks like

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Bootstrap web page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>


</body>
</html>

 

OUTPUT of source code:

 

how to use bootstrap example

 

This is how the whole webpage looks like after including meta tags and CDN, You can edit the code and add more elements and create something cool.

 

Want to learn Bootstrap, Html, and CSS, NoobtoDev provides you the better and reliable tutorials and resources to learn.