Click here to Skip to main content
15,867,939 members
Articles / Web Development / HTML
Tip/Trick

Bootstrap for Beginners

Rate me:
Please Sign up or sign in to vote.
4.49/5 (24 votes)
3 Mar 2017CPOL3 min read 64.8K   1.9K   40   7
This tip will explain step by step Bootstrap basic development for beginners. Attached is small application having three pages using Bootstrap CSS, Components and JS.

Introduction

Bootstrap is powerful responsive UI development kit that includes components, JavaScript and CSS. When I first wanted to start learning Bootstrap, it was difficult for me to find a starting point. This brief tutorial will help you to find; where to start, how to find and apply different CSS, use components and finally how to test UI on different devices like Desktop, Mobile, Tablet and kindle, etc. Let's develop a small project. Create a new folder Bootstrap_Example anywhere in your computer, e.g. Desktop.

Step 1

Open URL: http://getbootstrap.com and click on Download Bootstrap. It will take you to another page with three options, click on the first link Download Bootstrap, Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included. Unzip folder and you will find three sub folders, css, font and js. You can also use CDN link given on the same page instead of downloading Bootstrap. Copy unzipped Bootstrap files and folder into Bootstrap_Example folder.

Step 2

Open URL: http://getbootstrap.com/examples/starter-template. This is your starting page to develop Bootstrap website. Right click on the page and Click View Page Source, copy source and paste it into Notepad file, rename the Notepad file to Index.html and paste it into Bootstrap_Example folder. This page has almost all basic code you need to start Bootstrap. Go to google.com and read about "Bootstrap Viewport". Specify the correct path for bootstrap.min.css and bootstrap.min.js in Index.html. Keep fixing the Index.html until you get the same UI like 
http://getbootstrap.com/examples/starter-template.
You can find the rest of JS files used in Index.html from the following URL: https://github.com/twbs/bootstrap/tree/master/docs/assets/js. Create a JavaScript folder in Bootstrap_Example folder to save the desired JS files from previously given Github URL.

Step 3

Open URLs:

CSS

12 Columns Grid System mentioned in CSS page really helps you to design Responsive UI for Mobile, Tablet and Desktop. It tells you division of page according to each device. Since we already referenced Bootstrap CSS, JS and Font, just copy and paste CSS classes in Index.html div and it will start working. Similarly go to Button section, copy the CSS from web page into Index.html page's button. You can play around CSS of different controls.

HTML
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Component

There are a lot of useful Components available in this section, e.g., drop down, Labels, Navigation bars, etc. Just copy HTML from page into Index.html and it's all yours. You don't need any expertise to use Bootstrap components.

HTML
<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" 
		data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

JavaScript

In JavaScript section, there are a lot of example Bootstrap components using different JavaScript code snippets to perform different functionality, e.g., Tool-tip, Button, Modal Popup, etc. Following is an example using tooltip:

JavaScript
<div class="col-xs-6 col-md-3">
                <img class="img-rounded img_shadow img-responsive thumbnail" src="Images/office.jpg" data-toggle="tooltip" title="Generic placeholder image" style="width: 140px; height: 140px;">
            </div>

<script type="text/javascript">
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

Test Your Page On Different Device

Open Index.hml in Google Chrome and press F12 to go to developer mode.

Find the small Mobile icon next to Zoom icon and click it.

Image 1

It will open the following window with Device dropdown where you can select any device to analyze the view. You might need to refresh the page by F5.

Image 2

History

  • 3/21/2015: Created

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
United States United States
A Solutions Architect with more than fourteen years of experience in application development. I mostly work in .NET, Angular, MEAN stack technologies and love to share what I do and learn during my day to day job. Please check my tutorials and blog:
https://fullstackhub.io
https://fullstackhubblog.com

Comments and Discussions

 
Generalgithub URL no longer works Pin
charles9228-Mar-19 10:33
charles9228-Mar-19 10:33 
Yaseer,

It looks like the github URL no longer works (404 error):
https://github.com/twbs/bootstrap/tree/master/docs/assets/js.[^]

Do you have an updated URL?

thanks
QuestionTruly for beginner and very useful Pin
Imam Suwito18-Jun-16 11:16
professionalImam Suwito18-Jun-16 11:16 
AnswerRe: Truly for beginner and very useful Pin
Yaseer Mumtaz19-Jun-16 11:38
professionalYaseer Mumtaz19-Jun-16 11:38 
Questionthe best way to describe bootstrap Pin
Member 1160035912-Apr-15 2:07
Member 1160035912-Apr-15 2:07 
SuggestionNot very clear Pin
Rivalus7-Apr-15 21:02
Rivalus7-Apr-15 21:02 
GeneralRe: Not very clear Pin
Yaseer Mumtaz8-Apr-15 3:43
professionalYaseer Mumtaz8-Apr-15 3:43 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun30-Mar-15 2:37
Humayun Kabir Mamun30-Mar-15 2:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.