Bootstrap tutorial for beginners

Now that you’ve learned CSS and how you can use it to style web pages, you will find yourself constantly adding similar styles from one project to another. Also, starting a project from scratch is often difficult, and it is usually the styling that can take some time to setup.

Furthermore, creating really effective layouts with CSS was difficult, before Flexbox came out. Even with Flexbox, there are times you will need to create complex web page layouts.

This is was a common problem faced by all web developers, naturally this lead to some innovation and the developers at Twitter came up with the idea to create a CSS file that would contain pre-written CSS code that can be used for quickly building common web page components such as forms, buttons, navigations, dropdowns, alerts and much more.

This file was then released, it was called Bootstrap, to the general public and anyone could download it and add it to their webpage to quickly create a website from scratch. All you had to do was include the file into your web page.

The original Bootstrap project was released back in 2011, and since then it has gone through quite a lot of iterations and has had hundreds of developers contribute to its development. At the time of this writing, the current version is 4.5.

So we will be working with this version. Now it’s worth noting that Bootstrap has a detailed documentation that you can use to add components to your web page really quickly.

To this end, we will only look at some of the components that you can add to your web page using Bootstrap. For more specific components you can refer to the documentation.

On a side note, as a developer it’s is really important to get exposure to documentation of projects. Because in your career as a web developer you will no doubt be using dozens of different libraries and frameworks such as Bootstrap in your personal and commercial projects.

These projects will have documentation on how to install, used and debug. So, it is imperative that you get into the habit of reading documentation and using it to help you build your projects.

Adding Bootstrap to your projects

There several ways that Bootstrap can be added to a project, for our purposes we will look at how to add it without downloading any files. The quickest way to add Bootstrap to your project is to use a Content Delivery Network link (CDN).

CDNs are essentially servers that host files, these servers are located all over the world for fast access. So, if you’re located in Singapore for example, you are able to download the file quickly by using the nearest CDN, which could be located only a few miles away.

Head over to the official Bootstrap website: https://getbootstrap.com/ then scroll to the Bootstrap CDN section and simply copy the CSS CDN file only:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/ bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

Note: there are also JavaScript files that come along with the CSS, these are needed as some components in Bootstrap add behaviour to the page and for that JavaScript is needed.

For example, when you add Nav menu with Bootstrap it uses JavaScript to show the menu when clicked while being viewed on a mobile device. For now, just add the JavaScript files and know that these are needed to add behaviour to the web page like sliding and hiding the nav menu as you will see soon.

After going through the basics, I highly encourage you to look at more components and those that add behaviour to get more practice. For now though, let’s look at some the core components that Bootstrap has to offer.

To follow along, create an index.html file and then add bootstrap CSS file in the head section:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Bootstrap 101</title>
</head>

This adds the Bootstrap file in the head of our page, this file contains pre-written CSS code that we can use in our projects without us writing a single line of CSS code, this is really powerful.

Then Add the JavaScript files just before the closing body tag:

<body>
  

  <!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

We add the JavaScript files here and not in the head section like the CSS, because we want our page to load all of the HTML & CSS content before loading the more heavier JavaScript files.

This contributes to a better user experience. Something that you will be a striving to achieved as a web developer throughout your career.

One of the main components that Bootstrap offers is the navigation menu. This is a core part of all websites, as they need a nav menu. To add a basic nav menu you can simply copy the markup from the bootstrap website:

  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>

This will create a simple nav menu:

figure1-3

We were able to add this styled nav menu without writing a single line of code ourselves. In the markup, you will notice that suitably named CSS class names have been added to the elements. Styling for these classes has already been pre-written for us to use.

We can obviously make customizations by addiny our own css. We can do these by adding another CSS file after Bootstrap to add our own styles and where necessary override those of bootstrap.

If you want to customize the styles you must add your own stylesheet after Bootstrap in the head section. Otherwise if you add it before Bootstrap your styles will not apply, because of the way CSS works – the latter styles take precedence always.

We can add a more sophisticated nav menu by using the Navbar component from Bootstrap. Here is the markup and associated classes:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</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="#">Link</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>

We now have a nice navbar menu with a search component:

figure2-4

If you resize to a smaller screen, the nav menu is fully responsive and also works on all devices including mobiles:

figure3-3

On smaller devices the normal menu disappears and a burger icon is used for toggling the menu to display and hide accordingly. For the menu to work, it needs JavaScript, so this is why we needed to add the JavaScript files at the bottom of our index.html file page.

Jumbotron

Next we’re going to look at a component that has multiple uses cases, called Jumbotron. We can use the Jumbotron component for landing pages, to highlight main content on the page and so on. To add the Jumbotron component, click the Jumbotron link from the Bootstrap documentation and add the following markup:

 <div class="jumbotron">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </div>

This will give us a nicely styled component that we can customize to our liking:

figure4-4

To make the Jumbotron responsive, just add the class jumbotrin-fluid to the Jumbotron div:

<div class="jumbotron jumbotron-fluid">

This will make the Jumbotron responsive on smaller screen sizes.

Buttons

You would have noticed that there was a button included in the Jumbotron component. With Bootstrap we can add an array of buttons by simply applying the button classes.

At the moment we are making use of the primary button, but we can change the color to something else by applying one of the available colors:

figure5-3

To change the color of our button we simply need to add the name of the class, so if we want to change the color to green we simply add btn-successafter the main btn class:

<a class="btn btn-success btn-lg" href="#" role="button">

This changes the button color:

figure6-2

Grid System

Next we’re going to look at what has made Bootstrap the main Front End CSS framework out of the many available, which is the grid system. Laying content out on a page can be very difficult and the Bootstrap grid system has made it a whole lot easier.

If we want to use the grid system we simply need to create a div with a class row and then add our components. We’re going to create 3 boxes that will be positioned next to each other:

<div class="row">
    <div class="col-md-4">
        <h2>HTML</h2>
        <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
        <p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
    </div>
    <div class="col-md-4">
        <h2>CSS</h2>
        <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
        <p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Bootstrap</h2>
        <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
        <p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
    </div>
  </div>

This create 3 horizontal boxes that sit next to each other in a row:

figure7-2

We’re able to achieve this by making use of the grid system. Our boxes are also fully responsive, so they stack on mobile devices nicely.

There’s a whole lot more that we can do with Bootstrap, we’re only just scratching the surface of its capabilities. Go ahead and play around with more components and see if you can build something interesting with it.

Conclusion

From the short introduction to Bootstrap you will have realized that we can use it as a base for building our websites. The key concept to understand in all of this is that the documentation is your best friend.

It explains how you can add the project, how to use the different components, there limitations and so on. So it is really important that you get comfortable working with documentation in general and as far as documentations go Bootstrap’s documentation is excellent.