We are here to show you how to create a responsive website using Bootstrap Framework – Step by Step with explanations from scratch.
In order to completely understand what Bootstrap is for designing responsive websites, you would need to recognize the framework’s basic components. The three elementary CSS and JS files together creates the framework.
Grid system basically makes the Bootstrap to be a kind of a responsive framework. The system is a twelve column grid layout that simply means that entire screen width is divided into twelve different columns. Its relevant framework possesses predefined classes in order to create a mobile responsive design for many device sizes.
Below listed are the six points that you must consider when learning what is Bootstrap for creating responsive websites.
Basic points to consider:
• Whole layout will be made using rows and columns
• Predefined classes such as col-md-12, col-sm-6 must be used for fast layout creation
• There can be twelve maximum columns prevalent in a row
• Columns possess styling to make spacing between the columns
• Rows need to be defined inside the .container class
• Elements such as text boxes, labels, buttons must be kept inside column
In the below section you will be learning regarding Grid layout, what classes it provides as well as what media query does it uses in order to create layout responsive.
Grid layout and media query:
The grids makes use of the media query to create layout as responsive, below is the media port break down depending on screen size
In this, xs implies extra small devices that possess a width lesser than 768px. Every mobile device is included in this category. You can make use of
col-xs-12 depending on needed column width when you design the mobile layout, this rule applies to small, medium as well as large devices.
Below you will learn this grid system and bootstrap by making a simple hello world example.
Project Hello World using Bootstrap:
Initially download the framework files if you already have not done it and take out the resource after the download is completed. You can use sublime text as a code editor and chrome as browser for web page testing in this example.
Below is how my project setup looks like:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title></title> </head> <body> </body> </html>
In this <!DOCTYPE html> declaration is not a regular HTML tag but basically it is an approach to inform a browser that this page is of kind of HTML5 markup page. Declaration of <html lang=”en”> recommend that the language of content page is English and it is typically useful for screen readers that require to interpret its content.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> is a kind of meta information dedicated for Internet Explorer browsers, while
<meta name="viewport" content="width=device-width, initial-scale=1"> is essentially a responsive website signal meta information.
width=device-width: The browser would maintain the page width at the width of the device screen, hence to place this in an easy way if the device screen is around 320px wide, this page will be maintained at 320px width.
initial-scale=1: This helps browser to maintain the uniform layout as the screen size rules and orientation alters. For example, the content of page appears the same scale on vertical and horizontal mobile layout.
Hello World code review:
The mentioned code is to be used for Internet Explorer (IE) 9 or only for former version. You can easily see the [if lt IE 9] that is the HTML code applied to inform the particular browser to carry out some actions. In this case, IE 9 or earlier version is being asked to load two script resources html5shiv and respond, while these scripts are made to be used to make the responsive website under the IE 9 or its former versions.
Now, below you will finally learn actual use of Bootstrap to have a responsive template for both desktop and mobile template view.
Initially, it is necessary to start with the navigation part as it is very simple to create navigation for website using Bootstrap because now you have all required styles, classes, and script accessible.
The navigation is divided into two major portions, on the left pane you own company name while on the right side you might have navigation items such as home, services, why choose us etc. For this,
<nav> HTML5 tag will be used to define the navigation links and later on
navbar-inverse classes will be used.
navbar class basically presents the rudimentary navigation structure and
navbar-inverse is used to get shadier navigation panel in its place of usual light navigation panel, lastly
navbar-fixed-top is applied to make a sticky header.
Responsive Menu Toggle Button:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> </body> </html>
The mentioned code makes a mobile navigation panel to close or open toggle button, its button will be located on the right pane. To observe this in action press key- F12 and CTRL+Shift+M on browser-chrome and then press CTRL+Shift+M on browser-firefox and later choose any mobile device from mentioned list.
The structure of navigation link is easy as every link confined within the list items (i.e. li), the unordered list comprises all the list items and lastly the div includes the unordered list. The classes such as nav, collapse navbar-collapse, and nav-barwrks for the styling that you usually watch on example.
Navbar Dropdown Menu:
You might have observed the services item displayed on the navigation menu as well as displayed a down arrow after the completion of text. It is essentially a drop down menu, it comprises items of child navigation, while hovering mouse on the parent item will carry the child items to be displayed on the page.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul> <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Services<span class="caret"></span></a> </li> </ul> <ul class="dropdown-menu"> <li> <a href="#">Web Development</a> </li> <li> <a href="#">Content Writing</a> </li> <li class="divider" role="separator"></li> <li class="dropdown-header">Dedicated Resource</li> <li> <a href="#">Hire PHP Developer</a> </li> <li> <a href="#">Hire Android Developer</a> </li> </ul> <ul></ul> </body> </html>
The class for dropdown recommends that the list item will be of a kind of a dropdown. The link tag in combination with dropdown-toggle activates the click event as well as the JS code treats to the event and also hide/show the primary items.
With Bootstrap, it is quite simple to design an image slider, named as carousel. You have two images and captions provided to design an image slider and in this template, the carousel section has been divided into three parts:
1. Carousel-Indicators: The tiny white dots located on the lowest centre part of the carousel. It’s usually implemented to show user number of items present in the carousel, it also provide them a graphical method to select any item by clicking on those white dots.
2. Carousel-Inner: This is basically the carousel item collection and every items in this case -images and captions will be maintain within it.
3. Carousel-Control: Whenever you see the previous and next arrows while clicking on the image and they are designed in this section, as well as they are implemented to navigate image back and forth as well.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> </ol>This will add the little white dots at the bottom of the image. Structurally they are ordered list. And underlying JS code makes them actionable. carousel-inner: <div class="item active"> <img class="first-slide" src="img/slide1.jpg"> <div class="container"> <!-- First image caption --> <div class="carousel-caption call-to-action"> <h1>Example headline.</h1> <p>Caption text goes here...</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> </div><!-- First image caption ends --> </div> </div> </body> </html>
The corresponding structure is very simple to recognize and it is very self-explanatory as well. On the other hand, Carousel-inner class is the root container of every image slides, while each item class owns image slide.
The subsequent container unit makes the region for titles situated on the top side of any image. At last, carousel-caption call-to-action grasps the real caption text as well as call to action button, located on the image.
Responsive websites are found everywhere today whether its company or institution, hence learning how to create it is vital. Using Bootstrap with steps and methods discussed above, you can create elegant responsive website.