How to Use Bootstrap With HTML

How to Use Bootstrap With HTML

First, let's understand what Bootstrap is. Bootstrap is HTML, CSS, and JavaScript framework to create mobile-first, responsive websites. So, it is a framework that contains HTML and CSS-based design templates. It uses the HTML and CSS markup for content and styles and has custom jQuery plugins to give behavior to the site.

A responsive website is a site that adapts itself to be compatible with devices of any screen size. The website design should be such that it gives a good user experience, be it on a smartphone or a large desktop.

How to Use Bootstrap with HTML?

To begin with Bootstrap, first, you need to have Bootstrap installed on your computer. you can download Bootstrap from getbootstrap.com or include Bootstrap via CDN if you don't want to download Bootstrap locally.

Recommended Reading: Responsive and Easy to Use Bootstrap Video HTML Website Templates of 2019

If you have downloaded Bootstrap locally on your computer, the following would be the file structure.

If you have downloaded the precompiled Bootstrap,

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

If you have downloaded the Bootstrap source code,

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

In the CSS and JS files of Bootstrap, we have a bootstrap.css, bootstrap.min.css, bootstrap.js and bootstrap.min.js files. The min.css and min.js files are the same as .css and .js files but they have been minified in order to reduce the size of the file by removing the white spaces and returns. These files are not readable by humans. The purpose is to reduce the file size and improve the loading time of the webpage.

Next, what you need is a text editor. Any text editor would do. But I recommend Atom or Sublime. Both are great text editors and are free.

Also Read: 10 Responsive Bootstrap PSD Website Templates Worth Checking Out 

To start, open a file in the text editor and save the file with the filename and the extension .html. This is where you will write the content of your website. If you intend to add custom CSS to your web page then create a file and save it with the extension .css.

Write the basic structure of HTML markup. This should look like this.

<!DOCTYPE html>
<html>
  <head>
  <title></title>
  </head>
  <body>

  </body>
</html>

In between the <head> and </head> tags is where you would write the <meta> tags and the <link> tags. The content of the website is written within the <body> tags.

Now, include the Bootstrap CSS and JS file in the HTML to be able to use Bootstrap. Include the link bootstrap.min.css file in the <head>. When adding your custom CSS file make sure that you add it after adding bootstrap.min.css. in order to override the bootstrap styles.

Include the JavaScript files using <script> tag right before the </body> tag. The reason for this is to help load the visible part of the page faster. If the JavaScript files had been written before the browser will render the JavaScript first and then the next files. So if a user is loading the website it would seem like the website is taking much more loading time.

Before starting with building a simple template with Bootstrap, I recommend that you go through the documentation of Bootstrap on the official website and familiarize yourself with the components, flexbox, grid system, etc.

So let's start with creating a simple page using Bootstrap. The example page here consists of some of the commonly used Bootstrap components like Jumbotron, buttons, and a modal.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Bootstrap 4 Tutorial</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/custom.css">
</head>

<body>
  <!-- the navbar -->
  <nav class="navbar navbar-toggleable-md navbar-light bg-info">
    <button class="navbar-toggler navbar-toggler-right" 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>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
       <input class="form-control mr-sm-2" type="text" placeholder="Search">
       <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
     </form>
    </div>
  </nav>
<!-- the jumbotron -->
  <div class="jumbotron bg-warning">
    <h1 class="display-3">Bootstrap 4</h1>
    <p class="lead">Version 4 alpha 6</p>
    <hr class="my-4">
    <p>This is an example of a simple template created using Bootstrap 4.</p>
    <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>
  <div class="container">
     <p>Click the button below to launch the modal using Bootstrap 4.</p>
     <!-- Button trigger modal -->
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
     Launch demo modal
     </button>
  <!-- Modal -->
  <div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Congratulations!!!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <div class="modal-body">
    You have created your first Bootstrap 4 Template.
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/Bootstrap_tutorial.js"></script>
</body>

</html>

The above code produces the result as in the following.

Bootstrap 4 sample template

Upon clicking the modal button.

Bootstrap 4 modal

So, there we have our simple web page using Bootstrap. We have not used any custom CSS for styling, only the Bootstrap 4 classes. With HTML and Bootstrap, we can easily create the front end of a fully functional website, but a little bit of CSS of our own can make your website look more beautiful and attractive.

Practice makes perfect. So, download our free bootstrap landing page template, Marshmallow, and practice how to use Bootstrap with HTML.

BootstrapDash believes in providing the best, efficient and quality bootstrap dashboard template to get your web application up and running easily and quickly. Want to create a stunning website of your own? Start learning

Best Bootstrap Admin Template ad