Tutorial Menu
  1. Home ›
  2. Bootstrap
Next ››

Bootstrap Introduction

Bookmark
Bootstrap is a client side JavaScript framework for designing responsive web pages in an uniform manner with reduced effort. Bootstrap library is a collection of CSS, JavaScript and font files.

Bootstrap has predefined templates and html elements like buttons which will ease the job of a designer. Bootstrap is a free and open-source library.

Bootstrap History

Bootstrap is the most popular project on GitHub based on stars it received as of June 2014. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was originally named as Twitter Blueprint. Twitter released Bootstrap as opensource on August 19, 2011. It is being continually developed and maintained by a small team of people. Bootstrap version 2.0 supported the responsive web design. From version 3.0 onwards Bootstrap moved to mobile-first policy.

Responsive design is an approach to web design aimed at provided optimal viewing and interaction experience across multiple different devices like mobile, tablet and desktop.

Bootstrap Advantages

  • Mobile-first design philosophy
  • Responsive design
  • Browser compatibility
  • Reduces designer effort
  • Free and open-source
  • Well adapted and mature framework
  • Easy to learn and use

Bootstrap can be downloaded from getbootstrap.com

How to Use Bootstrap?

Bootstrap can be downloaded and the library files can be added to your project. Then those dependent files can be included on the web pages. Another way to use Bootstrap is, instead of downloading bootstrap the dependent files can be directly linked to Bootstrap CDN. This Bootstrap CDN is provided by MaxCDN. Advantage of using a CDN hosted file is that, when a user requests the page, these files will be served from a server that is closest to the requesting user location. Add the following to the HTML Head tag in the web page where you want to use Bootstrap.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Basic Bootstrap Page

Following is an example of a basic bootstrap page. Points to note are,

  • Include the HTML5 doctype, lang and charset
  • Declare viewport meta tag for page responsiveness
  • Choose between fixed or fluid width container. As the name suggests, fluid width uses the complete width of the device viewport.
<!DOCTYPE html>
<html lang="en">
<head>
      <title>Bootstrap Example Page</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
      <body>
      <div class="container">
        <h1>Bootstrap Example Page</h1>
        <p>A paragraph of text</p> 
      </div>
      </body>
</html>
Tutorial Menu
  1. Home ›
  2. Bootstrap
Next ››

Exception Occured:

TypeErrorException
Messageerror_log(app.log): Failed to open stream: Permission denied
File/home/dh_czz6eb/tutorialwalk.com/common/error.php
Line36
Trace#0 (): log_error(2, 'error_log(app.log): Failed to open stream: Permission denied', '/home/dh_czz6eb/tutorialwalk.com/common/error.php', 36)
#1 /home/dh_czz6eb/tutorialwalk.com/common/error.php(36): error_log('26-04-2024 10:45:25 am (IST),/home/dh_czz6eb/tutorialwalk.com/common/common.php,193,0,ErrorException,Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter,/bootstrap/bootstrap-introduction.html,#0 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parame...', '/home/dh_czz6eb...', 193)
#1 [internal function]: check_for_fatal()
#2 {main}
', 3, 'app.log')
#2 /home/dh_czz6eb/tutorialwalk.com/common/error.php(8): log_exception(ErrorException)
#3 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter', '/home/dh_czz6eb/tutorialwalk.com/common/common.php', 193)
#4 (): check_for_fatal()
REQUEST_URI/bootstrap/bootstrap-introduction.html