Spice up your HTML, CSS & JavaScript with Bootstrap

From GEST-S482 Digital Business
Jump to navigation Jump to search

Introduction

Bootstrap is one of the most powerful front-end (Html, Css and JS) framework, allowing you to develop faster and easier the best responsive web apps.It gives you the acces to HTML and CSS designs to implement common user interface components such as alerts, dropdowns, forms, buttons, navigations bars and many more.

Historically, Bootstrap was developed internally by a Twitter employee devlopping beautiful design, it was in 2010. It is now an open-source framework for the benefits of everyone.

What are the main advantages of bootstrap ?

*It saves a lot of time: When using bootstrap you don't need to put time and efforts in the design and you can focus on more important important development work.
  • It is easy to use: Even with a really small knowledge of front-end languages you'll be able to use bootstrap. With some well done cut and copy, it is possible to get some really good looking components using complex designs (CSS) and nice animations (JSS).
  • It is responsive: One of the most boring thing, with front-end development is responsiveness. A website is responsive if the layout is changing with the size of the screen used. If you are on the app on your phone you will need to see a different layout that if you were on your computer. It is a real nightmare to code responsive components and it's pretty difficult. With bootstrap the imported components are already responsive.
  • It is compatible with browers: All the browers aren't reading the front-end components the same way. A really good-looking component on Chrome could be very ugly on Microsoft Edge. With bootstrap, the components are good looking on each browers so that you don't have to worry.

Now that you know, all the benefits linked to bootstrap, let's implement it on our websites.

Quick Start

The installation part of bootstrap is really easy, there's no need to run command into the weird looking command prompt (terminal of your laptop). The only thing that you need to do is to add 2 lines of codes in all your html files (or in the base.html that you are extending in each html file). One line of code to import all the Bootstrap CSS code, and the other line of code to import all the Javascripts code.

//CSS 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
//Javascript
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Bootstrap components

In this sections we will cover some of the most useful components in order to get a user-friendly app.

A first example: The NavBar

This is the HTML code generating our beautiful navbar. As you can see, in all the HTML tags they are class, all those class are referring to CSS code that bootstrap installed for us. It's absolutely not necessary for us to understand the CSS bootstrap is using. The power of bootstrap is that you don't need to understand a single line of CSS.

This is the classic bootrasp Navbar, we can play with the html class="" in order to customize our NavBar. For example, to get all our NavBar in black we can change the first line of the html code to ⇒ <nav class="navbar navbar-dark bg-dark">. That's an example for the style. Now, what if we want to change the Home text in the NavBar to a Welcome text ⇒ You directly edit it in the Html code.

Image: 900 pixels Image: 900 pixels

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

A second component: Modal

Modals are built with HTML, CSS & JS. The main characteristic is that they are positioned over everything else in the document. In the real life, modals are always used by website in order to show that they use cookies or to ask you to disable AdBlock. It's very complex to make such a component without bootstrap and it asks to know quite a lot about the 3 front-end languages. Image: 900 pixels With bootstrap, the modal code is just below:

div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Let's customize the code in order to get a modal imposed by GDPR to say to visitors that cookies are used. That's it we are know displaying a custom modal on our website with very few efforts, we've just changed the content of the HTML tags!!

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Your Cookies Settings</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>The digital firm group are using cookies in order to recolt datas about your coding preferences.
            They are also used in order to make millions$ by selling your informations but that's a secret...
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">More Informations</button>
        <button type="button" class="btn btn-primary">Yes, I accept</button>
      </div>
    </div>
  </div>
</div>


There are many more components made available by Bootstrap and you can check them all by reading the official documentation at :[1](https://getbootstrap.com/docs/5.0/getting-started/introduction/)