How to Bootstrap- Getting Started

Bootstrap is a popular front-end framework for web development. You can use Bootstrap templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Tabs, Accordion, Carousel etc.

Bootstrap is the way you can make an awesome looking website for every type of device. When you start learning how to make website probably designed it for desktop, then you try it to look it on phone. Bootstrap is used to create responsive layouts for every type of devices.

 

Bootstrap Features

  • The bootstrap main feature is that it comes with free tools to create responsive web layouts. Bootstrap data APIs can create advanced interface components without JavaScript.
  • Anyone can develop with Bootstrap with the basic knowledge of HTML and CSS.
  • The bootstrap responsive feature makes your website adjusts for Desktops, Tablets, and Mobiles without any change in the markup.
  • Bootstrap provide many predefined templates and classes which save lots of time to develop your website.
  • It is compatible with all browsers such as Firefox, Chrome, Safari, Internet Explorer, and Opera.
  • All Bootstrap components share the same design templates and styles through a central library so that the designs and layouts of your web pages are consistent throughout your development.
  • Bootstrap is a free front-end framework to download and use.

 

Bootstrap Directory Structure

You can download Bootstrap files from getbootstrap.com. Two versions of Bootstrap are available here,  compiled Bootstrap and Bootstrap source.

Compiled Bootstrap contain minified version of CSS, JavaScript, and icons in font format. Bootstrap source contains original source CSS, JavaScript, and fonts with Bootstrap docs.

Once you download bootstrap, extract the files to your computer. The directory structure of the Bootstrap is as follows.

Bootstrap Directory Structure
     bootstrap
     |
     ├── css
     |   ├── bootstrap.css
     |   ├── bootstrap.min.css
     |   ├── bootstrap-theme.css
     |   └── bootstrap-theme.min.css
     |
     ├── js
     |   ├── bootstrap.js
     |   └── bootstrap.min.js
     |
     ├── fonts
     |   ├── glyphicons-halflings-regular.eot
     |   ├── glyphicons-halflings-regular.svg
     |   ├── glyphicons-halflings-regular.ttf
     |   └── glyphicons-halflings-regular.woff

 

Load Bootstrap using CDN

You can load the Bootstrap from a Content Delivery Network. MaxCDN support for Bootstrap’s CSS and JavaScript content delivery. CDNs can reduce the loading time of web pages. Use the following code to load Bootstrap and Jquery from CDN.

Load Bootstrap CDN
   <!-- Load CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

   <!-- jQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

   <!-- JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

Create Webpage using Bootstrap

To create a basic HTML template using Bootstrap, create a new HTML file on the Bootstrap directory. Enter the following code and save it as “index.html”.

index.html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <title>A Bootstrap page</title>

     <meta charset="utf-8">

     <!-- Viewport is to enable touch zooming and for renderthe page on mobile devices -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- Load Bootstrap CSS -->
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   
   </head>
   <body>

      <div>
         <p>A Bootstrap page</p>
      </div>
  
      <!-- Loads Jquery and Bootstrap Javascript -->
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/bootstrap.min.js"></script>

   </body>
   </html>

 

To open your Bootstrap page, Navigate to your index.html from your default Web browser.

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...