Tutorials Tonight's Logo
Follow Us

BOOTSTRAP 4 INTRODUCTION


What is Bootstrap?

Bootstrap is a free and open-source CSS framework. It is the world's most popular framework for building a responsive and mobile-first website.

Bootstrap follows a mobile-first approach, which means it involves designing a website starting with a mobile version, which then gradually adapted to larger screens.

Bootstrap contains huge CSS and Javascript based design templates for buttons, forms, navigation, alert, typography, and other interface components. Using these design templates you can make websites better, easier, and faster.

Note: Responsive websites are those websites that fit the device screen automatically. These websites adjust their contents automatically to best fit all devices like computers, tablets, mobile, etc.

bootstrap tutorial

Bootstrap tutorial for beginners


This Bootstrap tutorial includes all topics of Bootstrap with their examples such as containers, grids, jumbotron, table, button, carousel, badges, alert, form, labels, pagination, wells, image, progress bar, lists, etc.

This bootstrap tutorials contains various examples with editor where you can edit the code,


What is bootstrap used for?

Bootstrap solves many problems of front-end development that we had back in the days.

One of the main problem that bootstrap solve is webpage's responsiveness.

Bootstrap is focused on the idea to create a mobile-first responsive website, so the website made using bootstrap adjusts and reorders its content based on the device website is used on.

In the image below you can see what a responsive website looks like on different types of devices. You can see how the website is adjusting its content to best fit within the device.

responsive website with bootstrap
Responsive website with bootstrap

Advantages of using Bootstrap

If you want to design a responsive website then Bootstrap is a good choice.

Advantage of using Bootstrap are as follows:

  1. Bootstrap is lightweight and customizable. It can be modified to fit best for your needs.
  2. Using bootstrap is time-saving, it increases the development speed.
  3. Bootstrap is a consistent framework that supports all browsers and CSS compatibility fixes.
  4. Bootstrap creates a responsive website that fits every device.
  5. It makes designing websites faster and easier. Since it has pre-defined templates that save a lot of time.
  6. Bootstrap creates platform-independent webpages.
  7. Bootstrap has very good documentation. It is open source and has very good community support.
  8. Bootstrap has a great grid system.
  9. Bootstrap is easy to learn and use. ( how to set up bootstrap in HTML )


History of Bootstrap

The original name of Bootstrap was Twitter Blueprint. It was developed by Mark Otto and Jacob Thornton at Twitter. Various libraries that were used before Bootstrap caused inconsistencies and high maintenance burden.

Few months after the start of Twitter Blueprint many developers started contributing to it as a part of Hack Week. Twitter Blueprint was then renamed Bootstrap and released on 19th Aug 2011 as an open-source project.

In June 2014 Bootstrap was the number 1 project on Github


Bootstrap Responsive Website Example

Below is an example of a basic website using bootstrap 4. Don't worry if you don't understand the code, we will discuss everything in the coming sections.

<!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>Bootstrap Example Website</title>
</head>

<body>

  <h1 class="text-center">Bootstrap Example Site</h1>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navigation Bar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row mt-2">
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box1</div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box2</div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box3</div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box4</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ratione consequuntur reprehenderit repellendus provident voluptates id esse?</p>
        <p>Quod accusamus accusantium impedit possimus facilis, quasi beatae reprehenderit praesentium sapiente, vero at aliquam molestias dolor eius ipsam illum et quia distinctio. Tenetur, mollitia voluptatem? Doloremque reiciendis earum, modi itaque dignissimos est aut.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus molestias ad, eligendi id iste expedita quia optio tempora. Doloribus necessitatibus vel molestiae velit accusamus consequatur nostrum nisi, id hic obcaecati!</p>
      </div>
    </div>
    <div class="alert alert-danger">This is a danger alert.</div>
    <div class="alert alert-success">This is a success alert.</div>
    <table class="table table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th>Product1</th>
          <th>Product2</th>
          <th>Product3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>200$</td>
          <td>155$</td>
          <td>245$</td>
        </tr>
        <tr>
          <td>10 pieces</td>
          <td>12 pieces</td>
          <td>5 pieces</td>
        </tr>
      </tbody>
    </table>
    <div class="row mt-2">
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box5</div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box6</div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box7</div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="jumbotron">Box8</div>
      </div>
    </div>
  </div>


  <footer class="text-center">
    <div class="container">
      <div class="text-center">
        &copy; Copyright TutorialsTonight
      </div>
      <div class="bottom-footer">
        <div class="col-md-12">
          <ul class="footer-nav">
            <li> <a href="#"> Facebook </a> </li>
            <li> <a href="#"> Twitter </a> </li>
            <li> <a href="#"> Google+ </a> </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</body>

</html>
▶ Run the code

Output:

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Bootstrap Getting Started

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.