Brief Info on Bootstrap

Written By ; James Sinclair

“Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for everything from typography, forms, buttons, navigation and other interface components as well as JavaScript extensions. Unlike many other web frameworks, Bootstrap concerns itself with front-end development only.”?

There are many versions of Bootstrap with version 5.2 being the latest. In this article, we are going to build a website using Bootstrap 4.6

Prerequisites

Before starting, there are some skills you’ll have to know in order to learn and use the Bootstrap framework:

• HTML fundamentals
• basic knowledge of CSS
• and some basic JQuery

Firstly the Downloading and installing of Bootstrap 4.6

There are three ways to install and include Bootstrap 4.6 for your project:

1. Use npm
2. Use a Content Delivery Network (CDN)
3. Download the Bootstrap 4 library and use it locally.

The Bootstrap Grid system

The Bootstrap Grid system helps you to create your layout and easily build a responsive website. There have not been any changes in the class names, except the .xs class, which no longer exists in Bootstrap 4.

The grid is divided into 12 columns, so your layout will be based on this.

To use the grid system you’ll have to add a .row class to the main div.

col-lg-2 // class used for large devices like laptops

col-md-2 // class used for medium devices like tablets

col-sm-2// class used for small devices like mobile phones

Navbar

The navbar wrapper is pretty cool in Bootstrap 4. It’s so helpful when it comes to building a responsive navbar.

To get it, we are going to add the navbar class to our index.html file:

<!-- navbar --> ?

?<nav class="navbar navbar-expand-lg fixed-top "> ?

?<a class="navbar-brand" href="#">Home</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-4">

?<li class="nav-item">

???<a class="nav-link" data-value="about" href="#">About</a>????</li> ?

<li class="nav-item">

??<a class="nav-link " data-value="portfolio"href="#">Portfolio</a> ??

?</li>

?<li class="nav-item">?

??<a class="nav-link " data-value="blog" href="#">Blog</a> ????</li>??

<li class="nav-item"> ?

??<a class="nav-link " data-value="team" href="#"> ????Team</a> ???</li> ?

<li class="nav-item">?

?<a class="nav-link " data-value="contact" href="#">Contact</a> ???</li>?

</ul>?

</div></nav>

Create and include a main.css file so that you can customize the CSS style.

Put this within the head tag in your index.html file:

<link rel="stylesheet" type="text/css" href="css/main.css">

Let’s add some colors to our navbar:

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{?background:#fff !important;}

The new Bootstrap Grid is built with the Flexbox system, so for alignment, you have to use a Flexbox property. For example, to place the navbar menu on the right we need to add a justify-content property and set it to flex-end.

.navbar-collapse{

?justify-content: flex-end;

}

Add the .fixed-top class to the navbar to give it a fixed position.

To make the navbar background color light, add .bg-light. For a dark background, add .bg-dark, and for a light blue background, add

.bg-primary.

Here’s how that should look:

.bg-dark{

background-color:#343a40!important

}

.bg-primary{

background-color:#007bff!important

}

Header

<header class="header">

??

</header>

Let’s try and create a layout for the header.

Here, we want to make sure the header takes up the window’s height so we are going to use a little JQuery code.

First, create a file named main.js and include it in the index.html file before the closing body tag:

<script type="text/javascript" src='js/main.js'></script>

In the main.js file insert this a little code of JQuery:

$(document).ready(function(){

?$('.header').height($(window).height());

?

})

It’d be pretty cool if we set a nice background image to the header:

/*header style*/

.header{

?background-image: url('../images/headerback.jpg');

?background-attachment: fixed;

?background-size: cover;

?background-position: center;

}