Bootstrap is most popular front end development framework to create mobile friendly responsive websites very easily. You don’t need to learn best practices and how to solve cross browser issues. Just download bootstrap and learn basic classes that you need to apply in your HTML pages and that’s all.
To get started with Bootstrap basic knowledge of HTML is required. I have already published some articles bout HTML, If you are new to HTML you can read following articles to learn HTML basics.
HTML for beginners 1 : Creating your first web page
HTML for beginners 2: Code editors, Heading & Paragraphs
HTML for beginners 3: Adding links and images to your website
getting started with Bootstrap
What you really need: We need a text editor to edit HTML files, Bootstrap files and a web browser (Vhrome, Firefox, Safari etc) to view our final website in browser. I prefer SublimeText and Brackets for editing HTML pages and Google Chrome web browser to view webpages.
Download Links
Download Bootstrap framework free
SublimeText Code Editor download
Brackets Code Editor Free download
Google Chrome Browser download
Additional useful resources
Adobe Brackets code editor review
How to install Emmet in SublimeText and Brackets
Free Video course : faster HTML & CSS workflow with Emmet & Bootstrap
How to code responsive website with Bootstrap
Now you have downloaded all essentials tools that we need to code website. Lets start building. Open Zipped archive and Extract all files from bootstrap zip file.
Now rename extracted folder to something more suitable, such as BootstrapSite or anything you like. In my case bootstrap-3.3.4-dist was default name of extracted folder i have renamed it to bootstrap tutorial.
Files found in Bootstrap archive
You can see three sub-folders with related files in your extracted bootstrap archive.
CSS
– bootstrap
– bootstrap.css.map
– bootstrap.min
– bootstrap-theme
– bootstrap-theme.css.map
– bootstrap-theme.min
Fonts
– glyphicons-halflings-regular.eot
– glyphicons-halflings-regular
– glyphicons-halflings-regular
– glyphicons-halflings-regular.woff
– glyphicons-halflings-regular.woff2
js
– bootstrap
– bootstrap.min
– npm
But we don’t need all these files. there are many extra files that you can delete. Here is folder structure after deleting extra files.
Required files for Bootstrap Tutorials
CSS
– bootstrap.min
Fonts
– glyphicons-halflings-regular.eot
– glyphicons-halflings-regular
– glyphicons-halflings-regular
– glyphicons-halflings-regular.woff
– glyphicons-halflings-regular.woff2
js
– bootstrap.min
I have deleted all extra files for this tutorial. Now start sublime text or brackets code editor or whatever code editor you are using, drag your main folder into code editors sidebar. In my case i am using SublimeText and my folder name is Bootstrap tutorial.
If sidebar is not visible in SublimeText, go to View > Sidebar > show sidebar. Nor right click on your project folder name and select new file. Press ctrl+S and save this new file as index.html.
Basic Bootstrap template code
Now copy following code and paste this basic template code in your new index.html file. You can also find and copy this basic bootstrap template code from official bootstrap website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
With above code now you have added necessary files that will make your website mobile friendly and bootstrap ready. Bootstrap CSS and JavaScript files have been added that we need and there are some other tags and other necessary tags and links to files that are required to make sure your website will work fine on most browser including internet explorer.
Open index.html file in your web browser (Chrome, Firefox, Safari etc). You will see hello world heading. You are going to create a simple 2 column layout that will be responsive and mobile friendly.
Understanding Bootstrap grid system
IF you are absolute beginner to bootstrap, let me tell you that Bootstrap framework offers a 12 column responsive grid system for mobile, tablets and desktop. Small grid system for smart phones, medium for tablets and large grid system for large screen devices such as monitors.
Every grid system has its own specific CSS classes that yo can use very easily. For this tutorial i will use medium grid system. for Medium grid system you will have to use col-md-*. You will have to replace * with desired number from 1 to 12.
For example if you need to equal width column you will have to use col-md-6 class. Following code will generate 2 equal width columns.
but before using these classes you need a div with class of container. otherwise your grid won’t work. Simply create a div with class of container of you can add container class to your opening body tag.
Simple replace <body> with <body class="container"> tag. Now add a new div with class of row just after <body class="container">.
Here is complete code that you can use to create two equal width columns. Add this code just after opening body tag.
<div class="row">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit!</div>
<div class="col-md-6">Eius obcaecati aperiam ducimus, voluptatum iure, quasi dolore voluptatibus.</div>
</div>
After adding this code to index.html view your page in firefox or chrome. you will see two equal width columns and all content will be aligned center of the screen.
Lets create full width header section
Now you know basics of bootstrap grid system lets create full width header section of our website. For header section i will use h1 for website name and col-md-12 class to create full width header section.
<header class="row">
<div class="col-md-12">
<h1> Bootstrap website </h1>
</div>
</header>
two columns for primary and sidebar content
Next we need to create mark up for main section of our website. Some website uses 3 columns for main section and some uses two column layout. for this tutorial i am going to create 2 column layout. A wide column with col-md-8 class for primary content area, and for sidebar content i will use `col-md-4“ class. We also need a new div with class of row.
<div class="row">
<article class="col-md-8">
article content here
</article>
<aside class="col-md-4">
siedbar content here
</aside>
</div> <! main section ends here -->
As you can see i have created a new div with class of row and for primary content area i have used HTML5 article tag with class of col-md-8 and for sidebar i have used HTML5 aside tag with class of col-md-4. Paste this code in index.html file just after header markup. save file and view in browser. You will see two column layout.
Content for primary (article) section
Now we need content for our article. Normally you see a large title, few paragraphs, images and list items an articles. Delete article content here and add following content to complete out article section.
<h1>This is an article title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos corrupti reprehenderit animi voluptatem maiores, numquam esse, nihil voluptate ipsum temporibus exercitationem aliquid.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos corrupti reprehenderit animi voluptatem maiores, numquam esse, nihil voluptate ipsum temporibus exercitationem aliquid.
</p>
<ul>
<li>item 1</li>
<li>item </li>
<li>item 3</li>
<li>item 4</li>
</ul>
<blockquote>
this is a blockquote with some content here. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</blockquote>
Content for sidebar
For sidebar section i am going to use bootstrap’s list group class. See more examples and Learn more about Bootstrap’s List Groups at official bootstrap documentation
<nav>
<ul class="list-group">
<a class="list-group-item" href="index.html">Home</a>
<a class="list-group-item" href="aout.html">About</a>
<a class="list-group-item" href="Contact.html">Contact</a>
</ul>
</nav>
Nav is HTML5 element for navigation menus. Then i have used Unorder list with list-group class and each list items has a list-group-item class to apply styling to each item. Open index.html file and see your two columns website.
Final footer section
Creating a final section won’t be difficult, fir this simple website we will add just a simple copy right and contact us link. We just need to create a simple div will class of row and div with class of col-md-12. Copy following content and paste this code just after </div> <! main section ends here -->.
<footer class="row">
<div class="col-md-12">
<p> Copyright 2015 <a href="http://tahirtaous.com">TahirTaous.com</a> </p>
</div>
</footer>
Now our simple and fully responsive website is ready with bootstrap framework. With some really simple changes you can create beautiful websites, images, web fonts can make your simple website more attractive.
You can download all sample files iof this tutorial and i have added web fonts and some images as well, Open sample website in browser to see attractive and responsive website. To learn more open index.html file in any code editor and see all code that i have used. If you have any problem just add your comments below to ask me.
Leave a Reply