How to use Bootstrap to create a responsive website
Web development is not only an amazing skill to add to your resume but also an interesting skill to learn and believe me(as an electronics undergraduate) this is quite easy to understand irrespective of the engineering branch you are in.
But at the end of the day, the main requirement required to master a skill is not what branch you are in or whether it will give you a good grade or a high salary job, but the zest to learn something new and perseverance to complete what you have started.
This article is for beginners who started learning the skill of web development. Many online courses teach this skill, but I found that the HTML CSS JavaScript course for Web Developers by Coursera is a detailed online course for beginners. I will leave the link to this course at the end of this article.
Before proceeding with the building of a responsive website I would like to give some introduction about bootstrap and responsive websites.
The languages that every web developer should learn are -
- HTML-Used to define the content of the website that you are designing.
- CSS -Used to specify the layout of the webpage, in simple words used to style the webpage.
- Javascript-Used to program the behavior of the web pages.
So, from above it can be concluded that you can develop pretty cool websites having enough knowledge in HTML and CSS. So why use bootstrap or what exactly is bootstrap?
Bootstrap is an opensource frontend development tool kit. The advantage of using bootstrap is that it is easy to use and develop custom responsive websites quickly. Bootstrap contains pre defines CSS styles and javascript functions that can be readily used saving your time, instead of defining everything from scratch. You can download bootstrap files from their official website(link provided at the end of the article). These files contain a CSS folder that contains all the styles that can be used to style your website and a javascript folder. The current version of the bootstrap is 4.5.0, which is quite different from its version 3 and below. So if you think you have done everything correct and still not able to get the desired effect, check the version of bootstrap you downloaded and how to use that particular style from bootstrap’s documentation. Also for bootstrap to work jQuery should be present in the bootstrap javascript folder. jQuery can be downloaded from its official website.
We have been using the word ‘responsive’ quite a lot of times in this article! So, what exactly is a responsive website?
A responsive website can be defined as a site designed to adapt its layout to the viewing environment by using fluid proportion-based grids, flexible images, and CSS media queries. In other words, a responsive website can take the shape of whatever container it is viewed in. By container, I meant the screen of the device in which the website is being viewed. If the website is not responsive then there are chances that the website won’t align properly in smaller or medium-sized screens. So by making a website responsive you are allowing users to view the website in any device that they are comfortable using.
Responsive design uses the concept of a 12 grid responsive system. This grid system has 12 columns, which can be selected according to the size of the device. For example, you can start with 4 or 3 columns layout for large screen and increases the column size(decrease the number of columns) as you the screen size decreases.
If you want to see how a responsive website works, go ahead and minimize your browser if you are viewing this in your PC and expand and contract the browser and observe how the text and the images adjust themselves according to the size of the screen. Pretty cool right?!
Enough of this introduction! Let’s now start coding a responsive website!
I am going to use an external style link, instead of inline style content in this code. It is always suggested to create a separate CSS folder with all the style rules instead of an inline CSS style. To include the Bootstrap CSS folder you have to first of all link the Bootstrap CSS folder to your HTML code. In addition to this javascript file should also be included in the HTML file. After including all this the code will look like this —
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE = edge">
<meta name="viewport" content="width = device-width, initial-scale=1">
<title>responsive website</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styler.css">
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Tangerine">
</head>
<body>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script></body>
</html>
From the above code, it can be seen that I included stylesheet for the font tangerine from google font. This is necessary if the required font is not available in your system. Also, I have added a meta tag called viewport which will ignore all the default style options of mobile and uses the style rules coded by us. The stylesheet named styler.css is not a bootstrap CSS file. It is the external stylesheet I created to further improve the style of the website according to layout planned.
Following is the code to add a navigation header to your website. Navbar class of Bootstrap is used for achieving this. Navbar-brand of the navbar is used to style the project or product name. Since we are making a responsive website I thought of demonstrating a collapsable navigation button too. Navbar uses its class .navbar-toggler to create this collapsable navigation button.
<nav id="header-navbar" class="navbar navbar-expand-lg navbar-light">
<div class="container">
<div class="navbar-brand">
<a href=""><h1>responsive website demo</h1></a>
<span id="layt">An example of 12-grid layout!!</span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsable-nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="navbar-nav ml-auto">
<li class="nav-item">
<a href="" class="nav-link">
<div>dummy1</div>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<div>dummy2</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>Adding this header is an optional task until or unless you are creating a website for a company or a product. After coding for the header the main content of the website can be developed. In the main content we are going to see how to code for responsive elements.
<div id="main-content" class="container">
<h2>12-grid layout</h2>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box1</span></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box2</span></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box3</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box4</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box5</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box6</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box7</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box8</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box9</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box10</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box11</span></div></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div id="demo-tiles"><span>box12</span></div></div></div>
</div>
At the starting of the main content and header I have used the container class. It is used to set margins for the content that is described within the container. Then to create a 12-grid layout, ‘row’ class of bootstrap should be used. Within the row, we can define the number of columns that should be present at different screen sizes. The lg, md, sm, xs denote the screen sizes of large(min-width = 1200px), medium(min-width=992px and max-width=1199px), small(min-width=763px and max-width=991px) and extra small(max-width=762px) respectively. The number specified after the screen size determines how much the width of the elements in the grid should change to get the required number of columns. For example, col-lg-3 changes the layout in such a way that when the screen is large, it changes the width to — (1/(12/3))*100%, it 4 columns can be formed.
The CSS rules for the boxes is coded in the following way —
#demo-tiles{
position: relative;
color: white;
width: 100%;
height: 200px;
background-color: grey;
margin: 15px auto;
border: 2px solid orange;
}
#demo-tiles span{
position: absolute;
width: 100%;
text-align: center;
top: 45%;
margin-left: 0px;
font-weight: bold;
text-transform: uppercase;}The completed responsive website looks like this —
Hurray!! you have created your responsive website. Similarly, you can create nested columns if required by defining a row inside another row class.
Keep experimenting!!!
My GitHub repository for the code-
Bootstrap website -
Download link for jQuery —
Online course on Coursera -
