Introduction to Bootstrap CSS Framework

Introduction to bootstap

Bootstrap’s latest version is Bootstrap 4 and it is the newest which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Therefore I will talk about Bootstrap 4.

What is Bootstrap?

  • Bootstrap is a front-end framework for faster and easier web development and its free.
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs i.e. compatible with all devices.
  • Bootstrap automatically creates mobile-friendly websites.

Before going further You must know basics of HTML and CSS

If you want to learn quick bascis of HTML and CSS click on below links –

HTML | CSS

Why Bootstrap?

  • Easy to Use.
  • Mobile-first approach.
  • Wide range of browser compatible.

How to Get Started?

Bootstrap is a CSS framework and therefore, To use we need to link bootstrap.css and bootstrap.js files to our webpage.

You can download it from bootstraps official website and include it OR can use CDN link and script tag to include bootstrap’s files into our webpage.

Below is Bootstrap’s quick starter code form bootstrap’s official website

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

    <title>Bootstrap Hello, world!</title>
  </head>
  <body>
    <h1>Bootstrap Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    </script>
  </body>
</html>

In the above code, you can see bootstrap CSS and JS have been included with JQuery because the bootstrap.js file is dependent on the JQuery library (Javascript framework).

And In the above example, you can see meta tag which is used for webpage to shrink as per device width.

Let’s start

Bootstrap requires a containing element to wrap website contents. and these are classes used for container div.

  1. The .container– class provides a fixed width container.
  2. The .container-fluid class provides a full-width container.

Below is an example with output of containers

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap containers Example</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.3.1/css/bootstrap.min.css">
 <style>
 	.container{background:#ddd; }
    .container-fuid{ background:red; }
 </style>
</head>
<body>
  
<div class="container">
   <p>This part is inside a .container class.</p> 
  <p>The .container class provides a responsive fixed width container.</p>           
</div>
<br>
<div class="container-fuid">
   <p>This part is inside a .container-fuid class.</p> 
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           
</div>

</body>
</html>
Bootstrap containers Example

This part is inside a .container class.

The .container class provides a responsive fixed width container.


This part is inside a .container-fuid class.

The .container-fluid class provides a full width container, spanning the entire width of the viewport.


Leave a Reply

Your email address will not be published. Required fields are marked *