Bootstrap-the most popular CSS Framework

3 min readApr 14, 2020

Bootstrap is a front-end framework used to design responsive web pages and web applications. It takes a mobile-first approach to web development. Bootstrap includes pre-built CSS styles and classes, plus some JavaScript functionality. Bootstrap uses a responsive 12 column grid layout and has design templates for:

buttons

class = “btn btn-default btn-block”

button block makes the button length same as the size of page.

The btn-primary class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.

The btn-info class is used to call attention to optional actions that the user can take.

The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting

images

class = “img-responsive”

img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

tables

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap uses a responsive 12-column grid system

Take for example Bootstrap’s col-md-* class. Here, md means medium, and * is a number specifying how many columns wide the element should be.

You can use spans to create inline elements. By using the inline span element, you can put several elements on the same line, and even style different parts of the same line differently.

Bootstrap has a class called well that can create a visual sense of depth for your columns.

forms

All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%.

navigation

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from: The .container class provides a responsive fixed width container. The .container-fluid class provides a full width container, spanning the entire width of the viewport.

Sample Bootstrap Starter template

<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

You can include Font Awesome in any app by adding the following code to the top of your HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">