How to use Bootstrap?

By  ShC    39 - 01 January, 70
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.

 

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 and CSS 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 4 is the latest version of Bootstrap available. 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 must use Bootstrap 3, as Bootstrap 4 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.

 

Lets start with Bootstrap

There are some methods to implement 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, 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 Bootsrap 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-fluid">
<h1>Bootstrap webpage</h1>
<p>Some text</p>
</div>

</body>
</html>

 

OUTPUT of source code:

 

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.