Bootstrap Introduction

Ad Banner Image

Bootstrap 3 Introduction

  • Bootstrap has turned into the most popular front-end framework for building responsive sites.
  • Fortunately, it already includes a wide range of jQuery and CSS effects that will polish every website within no time.
  • It is a very powerful front-end framework for faster and easier mobile first web development.
  • It is free and you can use it in any kind of projects.
  • It have many predefined CSS classes to use directly in your HTML page, like text-center, mark and small etc.
  • You can divide complete width of web page up-to 12 responsive columns, means you can define width of an element as per device width.

Link: You can download bootstrap from https://getbootstrap.com/.

What is Responsive Web Page Design

The web pages designed for desktops, may not look good on mobile ( small screen ) devices, because horizontal scrolling required to view all the content.

And If the web page content rearrange ( wrap below other ), in the mobile devices according to the pixel width of the screen, then the user only need to scroll vertically.

The web pages such that when device screen width decrease some horizontal content goes down, or design specification changes based on the device width is known as responsive design.

Mostly in the desktop design the content is divided in multiple columns, and each column arrange side by side. And for small width devices the columns are arranged one below other.

Bootstrap Versions

Bootstrap have two primary version in current use, version 3 and version 4. The version 3 is old one, but many sites still using version 3.

Bootstrap 4 is new, fast and having more responsive features.

Bootstrap CSS and jQuery Component Library

Bootstrap have both CSS and jQuery library components. You have to include both in your HTML pages to use it just like any other CSS stylesheets or jQuery script file.

How to use Bootstrap in HTML Files

In the HTML file you have to add both bootstrap CSS and jQuery files with the link and script tag respectively.

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>

Warning:In the above code example we are assuming that you have downloaded the bootstrap.css and bootstrap.js files in the css and js folder respectively.

Note: Bootstrap JS require jQuery library, and you have to first add jQuery in your HTML file.

Features of Bootstrap 3

Bootstrap is compatible with all major browsers like Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera etc.

Bootstrap includes both CSS and jQuery components for text, forms, buttons, tables, navigation, image, carousels and many more.

Bootstrap have responsive classed like row and column. You can divide each row up-to 12 columns.

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress