Step 1: Go to the bootstrap website at http://getbootstrap.com/ and click on the button ‘Download Bootstrap’ to download the bootstrap folder.
It will lead you to another page with three download options. You can download any one from the “Download Bootstrap” and “Download source”
The button “Download Bootstrap” has “bootstrap-3.1.1-dist.zip” zip file and the button “Download source” has “bootstrap-3.1.1.zip” zip file.
Start Desiging Steps
Step 1a: Else go to “Customize” Menu on the top of the bootstrap website at http://getbootstrap.com/and scroll down to the bottom of the page to download the customized bootstrap.zip file by clicking “Compile and Download“.
It will lead you to another page with three download options. You can download any one from the “Download Bootstrap” and “Download source”
The button “Download Bootstrap” has “bootstrap-3.1.1-dist.zip” zip file and the button “Download source” has “bootstrap-3.1.1.zip” zip file.
Start Desiging Steps
Step 1a: Else go to “Customize” Menu on the top of the bootstrap website at http://getbootstrap.com/and scroll down to the bottom of the page to download the customized bootstrap.zip file by clicking “Compile and Download“.
Step 2: Now, let’s extract the contents of the downloaded .zip file.
If the downloaded zip folder is bootstrap-3.0.3, then after extracting you will find a lot of files inside, but we only need to use the files in the ‘dist’ folder. There you can find the below 3 folders and also you can use them in your website.
* CSS – Styles
* js – Java script files
* Fonts – Fonts from Glyphicons are included, as is the optional Bootstrap theme
* js – Java script files
* Fonts – Fonts from Glyphicons are included, as is the optional Bootstrap theme
Copy the contents of the ‘dist’ folder from the Bootstrap directory and paste into our website folder.
Step 3: The bootstrap.min.css is the minified version of the primary Bootstrap CSS file, so we can delete this file. Hence our website is a simple one. The same applies to the Bootstrap.min.js file.
Step 4: Let’s divide our bootstrap website tutorial into two parts.
a. Home page(i.e,index.html) – The index page will have full screen background slideshow using vegas jquery plugin, preloader and header with menu icons.
a. Home page(i.e,index.html) – The index page will have full screen background slideshow using vegas jquery plugin, preloader and header with menu icons.
b. Inner pages(i.e,about.html and services.html) – The inner pages will have content area, circular image elements and footer
Step 5: Creation of Home page(i.e, index.html)
Create a new index file in your Adobe dreamweaver/text editor named “index.html”. Go to the coding part of your index page(i.e, index.html) and add the below code into the file above the head tag </head>. The styles are loaded first to show up the website page with styles while loading.
Create a new index file in your Adobe dreamweaver/text editor named “index.html”. Go to the coding part of your index page(i.e, index.html) and add the below code into the file above the head tag </head>. The styles are loaded first to show up the website page with styles while loading.
Thus we have linked to the original bootstrap.css file located in the css folder. Hence we have installed the Bootstrap into our website.
Step 6: Then go to the bottom of the website page, coding part and paste the below script file above the body tag </body>.
Step 7: Our website is a responsive bootstrap website, so I have added the below viewport meta tagViewport meta tag lets you modify the “virtual viewport” of the mobile device to something different than the default, which is to zoom out on a webpage so its entire contents are visible on the screen. The mobile device to display the page without any zooming, so how much the device is able to fit on the screen is what’s shown initially. It is generally used for responsive design.
Step 8: A media query is a CSS declaration that is used as a parameter for when to call other style declarations based on the dimensions of the current viewing device.
Media Queries in Bootstrap will allow you to move, show and hide content based on viewport size. Following media queries are used to create the key breakpoints in the Bootstrap grid system.
Step 9: Our custom stylesheet can be created in the name of “styles.css” under CSS folder.
After adding the css and script files into the website, here is the code of the page without any content.
<!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>
Step 10: Bootstrap includes a responsive, mobile fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
The following grid options shows about the working of bootstrap grid system across multiple devices:
Step 11: Bootstrap is a 12-column grid. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. In Bootstrap 3, the .span classes have been removed, and replaced with a combination of .col- classes: .col-xs-, .col-sm-, .col-md-, and.col-lg-. The xs classes stands for mobile devices, sm stands for tablets, md stands for laptops, and lg stands for large desktop screens.
Step 12: Header with collapse navigation bar
Now we want to place the company name on the top-left and menu items with collapse navigation bar at the top-right most part of the navbar.
Bootstrap has a .nav class that allows us to create all kinds of navigation elements that come under the “header” class. Navbars collapse in mobile views and become horizontal as the available viewport width increases.
I have created a collapsable navbar or toggle navigation bar for the mobile menu. And here is the code for toggle navigation bar of the index.html page.
<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.entheosweb.com" target="_blank" class="navbar-brand">Entheos</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 -->
The class navbar-collapse to indicate the contents which will be collapsed in the responsive navigation. To add the responsive features to the navbar, the content that you want to be collapsed needs to be wrapped in a <div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has a the class of .navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. Three with a class of .icon-bar create what I like to call the hamburger button. This will toggle the elements that are in the .nav-collapse <div>.data-toggle=”collapse” is added to the link on which you click to expand or collapse the component. data-target attribute is added to the parent component, whose value is id of the child component.
The class navbar-right is to setup the navigation floated to the right.
It’s time to add some Bootstrap components. Bootstrap menu adapted for mobile devices. On mobile devices, display links to navigate change, there is a drop down menu. To use it you need the following 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>
Here we can see an icon of a with the three bars stacked together one below the other and it is called Glyphicon. Glyphicons are icon fonts which you can use in your web projects. It includes 200 glyphs in font format from the Glyphicon Halflings set.
<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>
Step 13: And this is the Style used for the navigation:
/* Navbar */
#nav {
margin-bottom:-20px;
}
.navbar { border-radius:0px !important;
}
.navbar-new {
background-color: rgba(0, 0, 0, 0.6);
}
.navbar-new .navbar-brand {
color: #f1f1f1; }
}
.navbar-new .navbar-text {
color: #f1f1f1;
}
.navbar-new .navbar-nav > li > a {
color: #f1f1f1;
}
.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: #e6e6e6;
}
.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: #555555;
}
.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: #777777;
border-bottom-color: #777777;
}
Step 14: We have created our company name on the header using the below code and styles.
<a href="http://www.entheosweb.com" target="_blank" class="navbar-brand">Entheos</a>
Styles:
.header {
display: table;
height: 100%;
width: 100%;
position: relative;}
.navbar-brand {margin-left:20px;}
.navbar-toggle {margin-right:25px;}
#nav {
margin-bottom:-20px;}
.navbar {
border-radius:0px !important;}
.navbar-brand {
color: #f1f1f1;}
Here .navbar-brand {margin-left:20px;} style is used to align the company name on the left side of the header bar and the stye .navbar-toggle {margin-right:25px;} will align the toggle navigation bar on the right side of the header.
Step 15: Now we can create the full screen slideshow using vegas jQuery plugin and preloader, to complete the index page. Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.
Download and extract vegas jQuery plugin to our websites. Add the below CSS into your website or copy it into your custom stylesheet.
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />
Step 16: Below is the code that controls the slideshow, place the following JavaScript code right before the end of body tag </body>. In the slideshow, we have used 3 girls images (i.e, girl1.jpg, girl2.jpg and girl3.jpg). We can add more images or replace with our own images.
<!-- Slideshow Background -->
<script>
$.vegas('slideshow', {
delay:2500,
backgrounds:[
{ src:'http://blog.entheosweb.com/wp-content/uploads/2014/03/girl1.jpg', fade:1200 },
{ src:'http://blog.entheosweb.com/wp-content/uploads/2014/03/girl2.jpg', fade:1200 },
{ src:'http://blog.entheosweb.com/wp-content/uploads/2014/03/girl3.jpg', fade:1200 },
]});
</script>
<!-- /Slideshow Background -->
<script type=”text/javascript” src=”/jquery.js”></script> <script type=”text/javascript” src=”/vegas/jquery.vegas.js”></script>
Here is the styles used for the slideshow:
/* ------ Vegas CSS for Slideshow ------ */
.vegas-background {
max-width: none !important; /* counteracts global img modification by twitter bootstrap library */
z-index: -2;
}
.vegas-background {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Step 17: Let’s add the preloader into our website. Preloader displays a loading animation until the browser fetched the whole web content and will fade out the moment the page has been completely cached. Below is the code for Preloader, add this HTML Code directly after the body tag.
<!-- Preloader --> <div id="preloader"> <div id="status"> </div> </div>
The image status.gif will be displayed in the DIV status and is located at /http://blog.entheosweb.com/wp-content/uploads/2014/03/status.gif.
Step 18: Include the JavaScript plugin code right before the end of the body tag </body>.
<!-- 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() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
Step 19: Then, include the below stylesheet in the CSS file:
/* Preloader */
@charset "utf-8";
body {
overflow: hidden;
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../http://blog.entheosweb.com/wp-content/uploads/2014/03/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
That’s it! We have created successfully our index page for our Bootstrap Website.
Step 20: Creation of Inner page(i.e, about.html)
Now, we are going to create the inner page. Let’s start by adding a wrapper div that wraps around all the other divs like a container for the page elements.
<div id="wrapper">
Already we have created the navigation bar in the index.html page. Hence copy the entire navigation code under the wrapper div.
Step 21: Rows are used to create horizontal groups of columns. Rows must be placed within a .container class for proper alignment and padding. Then add a container that will wrap the entire main rows of the page. Content should be placed within columns, and only columns may be immediate children of rows.
<div class="container"> <div class="row"> <div class="col-lg-12 col-sm-12"> <p>............</p> </div></div> </div>
Step 22: In the inner page, we are going to create 4 rows with a single-column, except the 3rd row since it will have 3 columns.
Step 23: First let’s create a row with a single column. The grid system utilizes a 12 column layout, meaning that the page can be divided by 12 equal columns if you so desire. Here is the code:
<div class="row"> <div class="col-lg-12 col-sm-12">
<div class=”col-lg-12 col-sm-12″> is basically used to create a single-column(100%) on a typical large(i.e, >=1200px) and small devices(i.e, >=768px) width.
Step 24: Next, we have to create 3 boxes with 3 images on it after the second row. Get three equal-width columns using “col-sm-4”.
<div class="col-sm-4"> <a href="#"> <img class="img-circle img-responsive" src="http://blog.entheosweb.com/wp-content/uploads/2014/03/template1.jpg"></a></div> <div class="col-sm-4"> <a href="#"> <img class="img-circle img-responsive" src="http://blog.entheosweb.com/wp-content/uploads/2014/03/template2.jpg"></a></div> <div class="col-sm-4"> <a href="#"> <img class="img-circle img-responsive" src="http://blog.entheosweb.com/wp-content/uploads/2014/03/template3.jpg"></a></div>
Here img-circle makes the entire image round by adding border-radius:500px.
Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Step 25: In our case, we have 3 columns set up using the class col-sm-4. This would lay them out side-by-side horizontally when the viewport width is above the screen size breakpoint.
<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>
Step 26: The <hr> tag has been used between the rows. It is used to separate content in an HTML page.
Step 27: Now we want to add Footer and also we want to place it at the bottom of the html page. You may insert the following code right before the end of container closing div tag </div>.
<footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © <a href="http://www.entheosweb.com" target="_blank">Entheos</a> 2014</p> </div> </div> </footer>
Step 28: After this step, you can duplicate about.html page by clicking the option File > Save As. Then you can rename it as “services.html”. You can create more pages by this way and also link it to the menu icon.
Step 29: Finally add the content to your page. Adjustments can easily be made to any style on the page by simply editing the style sheet. Take a look at the final output of the website here!
Step 30: That it! we have finished creating our Bootstrap Website. This is the responsive website, so you can resize your browser or load the example on different devices to test the responsive utility classes.
