If you haven’t been living under a rock, you must be well acquainted with the value Bootstrap can bring to your web development project. With its extensive set of tools and capabilities, Bootstrap has already made quite a headway in the web realm and as we see the webmasters and web development experts aiming to gain higher grounds and glide past their peers, there is an increasing traction towards the Bootstrap framework.
This web front-end framework makes way for creating websites that are slick and chrome, cross-compatible, fast-loading and allow visually in sync with how you envisage them. For those wanting to have a mobile-ready website, Bootstrap is a beast. The bootstrap-based websites run with a velvet touch on mobiles and make sure you do not lose out on your visitors coming from the small sized devices.
Icon Fonts for Your Next Bootstrap Project
Resources for Bootstrap Themes
the tutorial that you’re about to read and explore is aimed at complete Bootstrap beginners, you’ll go through the basics and will learn how to construct a responsive website from top to bottom. If you’ve got questions, problems, or simply feedback – please get in touch either through the comment section, or by using the contact page.
Jack is a guest author, so all the credit goes to him, just as you should try and ask him questions about this tutorial directly.
Now, this brings us to the underlying process that goes into creating a responsive Bootstrap-powered website that also boasts a beautiful slideshow. Let’s go through a bit-by-bit process of creating such a website:
To begin with, you need to go to the website getbootstrap.com and download Bootstrap to your system.
Once you are there, you will be prompted with three options on the screen that go by the name of “Download Bootstrap”, “Download Source” and “Download Sass”. You can select anything between the first two.
Let’s say we clicked the “Download Bootstrap” button, and thus, we fetched the file, “bootstrap-3.1.1-dist.zip”. Alternatively, you can also go to the Customize option on the top menu.
Extract the Contents of Zip File
Now, upon extracting the zipped file, you have a truckload of files in it. But we don’t have much to do with all of them. We rather are concerned with the ones that are located in the dist folder. In it, you can further locate three folders by the name of css, js and fonts. These are what are to be made use of for structuring your website.
CSS essentially decides the styles in your website, js is the concoction of JavaScript files while the fonts file combines different set of fonts, including Bootstrap-specific Glyphicons.
Now, before we proceed, it needs to be known that we do not need the Bootstrap.min.css and Bootstrap.min.js files.
Segregation
Now, to make things simpler, let us take things forward with a two-sections approach:
- We will first discuss technicalities regarding the home page in respect to the components being displayed on it.
- Then, we move on to the inner pages like the service pages and other posts.
Home Page
The file to be created for home page would be index.html. So, we create a new file in Adobe text editor by the name of index.html. Now, to this file, we will add the following code before the head tag:
<link href="css/bootstrap.css" rel="stylesheet"/> |
With this code, we have referenced the original bootstrap.css file which also implies the installation of Bootstrap in the website.
Deciding on the Footer
For the bottom portion of the page, the following piece of code will be added above the body tag:
<script src="js/script.js"></script> <script src="js/bootstrap.js"></script> <script src="js/jquery-1.10.2.js"></script> |
Adding Viewport Meta Tag
For the fact that we are creating a responsive bootstrap website, we will add a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
This way, you are changing the default settings in regards to the mobile device. It will make sure the content fits into the smaller screen sizes of the mobile devices. Essentially, this is done to boost the responsiveness of the website.
Media Queries
When it comes to calling the style declarations, you need media queries as an input. Depending on the size of the viewport, you can use the media queries to display or hide the content, or for that matter, move it around. . So, when you wish to create some breakpoints, here are few media queries you can use:
/* Large desktop */
@media (min-width: 1400px) { ... }
/* Small devices (i.e, tablets, small desktops and up) */
@media (min-width: 700px) and (max-width: 950px) { ... }
|
Playing Around with CSS
Now, in the CSS folder, we will create the styles.css file. Once we add the css and script files to the site, the code will look something like this:
< !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Free Responsive Bootstrap Template for Women</title> <link href="css/bootstrap.css" rel="stylesheet"/> <link href="css/styles.css" rel="stylesheet"/> </head> <body> <script src="js/script.js"></script> <script src="js/bootstrap.js"></script> <script src="js/jquery-1.10.2.js"></script> </body> </html> |
Fixing Rows and Columns
With its 12 column grid, Bootstrap needs some alignment. The rows have to be contained within .container. The span classes are removed out of the equation in Bootstrap 3 because we use .col-xs, .col-sm-, .col-md-, and.col-lg- , all combined.
Fixing the Header
then we proceed to placing the company name on the appropriate locations and we do it on the collapse navigation bar. The .nav class in Bootstrap makes it easier for us to create diverse navigational elements, all of which have to be place dunder the header class. Let’s have a glance at how to code the toggle navigation bar in index file:
<div id="top" class="header"> <div id="nav"> <!-- Navigation --> <nav class="navbar navbar-new" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobilemenu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="http://www.google.com" target="_blank" class="navbar-brand">Google</a> </div> <div class="collapse navbar-collapse" id="mobilemenu"> <ul class="nav navbar-nav navbar-right text-center"> <li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home</a></li> <li><a href="about.html"><i class="glyphicon glyphicon-user"></i> About</a></li> <li><a href="services.html"><i class="glyphicon glyphicon-cog"></i> Services</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav><!-- /Navigation --> </div> </div><!-- /Header Area --> |
So, when we create the collapse navigation, we use the class navbar-collapse to define the functions that dictate this feature. .navbar-toggle is responsible for triggering the collapse. Constant communication takes place with JavaScript to make sure that everything is carried out in a fine manner.
Now, we move on to add few Bootstrap components in a way that adaptation to the smaller mobile screens is also made seamlessly. The drop down menu on the mobile device will be managed by this code:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobilemenu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> |
Glyphicons are also used in many web projects. Let’s have a look at few font formats in context to them:
<li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home</a></li> <li><a href="about.html"><i class="glyphicon glyphicon-user"></i> About</a></li> <li><a href="services.html"><i class="glyphicon glyphicon-cog"></i> Services</a></li> |
Navigation Style
Now, we write the code for the Style that has ot be leveraged for navigation:
/* Navbar */
#nav {
margin-bottom:-15px;
}
.navbar { border-radius:0px !important;
}
.navbar-new {
background-color: rgba(0, 0, 0, 0.5);
}
.navbar-new .navbar-brand {
color: #00FF00; }
}
.navbar-new .navbar-text {
color: #00FF00;
}
.navbar-new .navbar-nav > li > a {
color: #00FF00;
}
.navbar-new .navbar-nav > li > a:hover,
.navbar-new .navbar-nav > li > a:focus {
background-color: rgba(0, 0, 0, 0.8);
}
.navbar-new .navbar-toggle {
border-color: #dddddd;
}
.navbar-new .navbar-toggle:hover,
.navbar-new .navbar-toggle:focus {
background-color: #000000;
}
.navbar-new .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-new .navbar-collapse,
.navbar-new .navbar-form {
border-color: #CCEEFF;
}
.navbar-new .navbar-nav > .dropdown > a:hover .caret,
.navbar-new .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-new .navbar-nav > .open > a,
.navbar-new .navbar-nav > .open > a:hover,
.navbar-new .navbar-nav > .open > a:focus {
background-color: #e7e7e7;
color: #80BFFF;
}
.navbar-new .navbar-nav > .open > a .caret,
.navbar-new .navbar-nav > .open > a:hover .caret,
.navbar-new .navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-new .navbar-nav > .dropdown > a .caret {
border-top-color: #FF0000;
border-bottom-color: #FF0000;
}
|
Creating Slideshow
jQuery plugin and preloader will now be used to create the slideshow. We use Vegas here, which happens to be a plugin for stunning slide shows that truly grab the attention of your users and do not let it go. The slide shows create a sight to marvel at.
You can download the vegas jQuery plugin and then add the CSS code below tot he custom stylesheet created earlier:
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" /> |
Now, we are also creating a code that gives more dimensions ot the whole slideshow stuff. We write a JavaScript that will be placed just before the end of body tag:
<!-- Slideshow Background -->
<script>
$.vegas('slideshow', {
delay:3300,
backgrounds:[
{ src:'http://blog.Google.com/wp-content/uploads/2014/09/tree1.jpg', fade:1500 },
{ src:'http://blog.Google.com/wp-content/uploads/2014/09/tree2.jpg', fade:1500 },
</script>
<!-- /Slideshow Background -->
|
And now, we define the styles that slideshow will flaunt:
.vegas-background {
max-width: none !important;
z-index: -2;
}
.vegas-background {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
|
Now, we add the JavaScript plugin code in the body tag:
<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!-- Preloader -->
<script type="text/javascript">
//< ![CDATA[
$(window).load(function() { // for loading every site element
$('#status').fadeOut();
$('#preloader').delay(400).fadeOut('slow');
$('body').delay(400).css({'overflow':'visible'});
})
//]]>
</script>
|
Once the above code is added, we proceed to add the following code into the CSS file:
@charset "utf-8";
body {
overflow: hidden;
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:99;
}
#status {
width:325px;
height:325px;
position:center;
left:50%;
top:50%;
background-image:url(../http://blog.xyz.com/wp-content/uploads/2014/09/pic.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
|
Building the Inner Page
Now, we move on to coding for the inner page of your website. We first create it and add a wrapper div:
<div id="wrapper"> </div> |
Now, the navigation bar that we have created in the index.html page will be used in its entirety below the wrapper div.
Creating Rows for Content Placement
Now, for placing the content, you need proper rows and columns. We also need containers that wrap the rows:
<div class="container"> <div class="row"> <div class="col-lg-12 col-sm-12"> <p>............</p> </div></div> </div> |
Now, we know that any grid system has a 12 column layout, so, we first create a row with just one column:
<div class="row"> <div class="col-lg-12 col-sm-12"> </div></div> |
Now, we create different boxes that will contain images:
<div class="col-sm-4"> <a href="#"> <img class="img-circle img-responsive" src="http://blog.xyz.com/wp-content/uploads/2014/09/design1.jpg"/></a></div> <div class="col-sm-4"> <a href="#"> <img class="img-circle img-responsive" src="http://blog.xyz.com/wp-content/uploads/2014/03/design2.jpg"/></a></div> <div class="col-sm-4"> <a href="#"> <img class="img-circle img-responsive" src="http://blog.xyz.com/wp-content/uploads/2014/03/design3.jpg"/></a></div> |
Now, we have used the col-sm-4 for the 3 columns, and now we decide how to place them horizontally:
<div class="row"> <div class="col-sm-4"> <h2>Templates</h2> <p>...........</p> </div> <div class="col-sm-4"> <h2>Blog</h2> <p>...........</p> </div> <div class="col-sm-4"> <h2>Free Resources</h2> <p>...........</p> </div> </div> |
For keeping a segregation between content pieces in the HTML, ‘hr’ tag is used.
For the Footer
Now that we have done our bit for the header, body and footer, next comes coding for the footer. As you know, it has to be placed right at the bottom of the page. So, we place the following code right before we close the container. Thus, it will be placed above the div tag:
<footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © <a href="http://www.Google.com" target="_blank">Google</a> 2014</p> </div> </div> </footer> |
Now that you have one of your inner pages, it has simply to be reproduced elsewhere for other inner pages by copying the code. You can also link them to the menu. The content then can finally be added to the different pages.
And thus the process of creating a responsive Bootstrap website is completed.
