Where to get started Bootstrap?

There are two simple ways to start using Bootstrap for your own web site. One way is to download Bootstrap from the website getbootstrap.com and secondly you can even include BootStrap from a CDN.

Benefits of using Bootstrap

One of the greatest benefits of Bootstrap is that it comes with multitude of tools for creation of flexible web designs and layouts using the interface components. With the help of application interface of Bootstrap, one can write single line of JavaScript and use its functionality.

It also helps in saving time and efforts as it has predefined design templates and classes which could be used for designing and development. With the help of responsive features, one can create various responsive designs which enable your web page to appear on different devices and screen resolutions without making any change in markup.

All the necessary Bootstrap components share the same type of design and styles which also helps in keeping the web page consistent throughout the development. Bootstrap is not only easy to use but also is not a complicated framework. It is also open source, free to download and also compatible with all the different browsers, which is created with modern browsers and even with older ones like Firefox, Chrome, Safari, IE and opera.

browsers

How to get started Bootstrap?

Bootstrap is easy and free to download. If you are a starter, then you can follow easy ways to get started with Bootstrap. For downloading and getting started with Bootstrap, one can simple refer to open source website: download Bootstrap files from here.

How to Download Bootstrap Files

If you are looking to download and host Bootstrap on your own for yourself, then you need to follow getbootstrap.com and follow the simple steps mentioned. On the other hand, If you don’t wish to download Bootstrap and don’t wish to host it for yourself, you can even include it from Content delivery network.

File Structure of BootStrap

If you download the bootstrap, you will get to know about the file structure and content. You needed to unzip the folder and then see the structure of Bootstrap. It would be similar to something like below.




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


Create Your Own Web Page using Bootstrap

1. Adding the HTML5 Document types: Bootstrap uses HTML and CSS property which also needs HTML5 document type. It is important to include HTML5 document type at the start of the web page with the right type of character set.

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
</html> 

Bootstrap 3 mobile-first-

Bootstrap is used for responsive mobile devices and it is part of a core framework. To ensure touch zooming and proper rendering, you need to add tag <meta> inside the head element.

	 <meta name="viewport" content="width=device-width, initial-scale=1"> 

Bootstrap Grid System

Bootstrap grid system is a fast way to design web pages. The Bootstrap grid system helps designing easy and faster ways for web page layouts. It is different from the earlier versions of Bootstrap 2.x and fixed by default. The newer Bootstrap 3 enables responsive mobile first grid system which helps in scaling the columns up to 12 as device and view size increases.

Bootstrap Column Wrapping Feature

With the help of column wrapping feature, one can create flexible layouts using the changes in column orientation based of the viewport sizes.

Create Multi-Column Layouts with Bootstrap 3 Grid System

With the help of multi-column layouts with Grid system, one can easily control the website layout for different devices and different screen sizes for devices like for cell phones, tablets, desktops etc.

Bootstrap Responsive Utilities Classes

One can use the responsive classes, one can enable the visibility of elements for some of the devices for which screen size falls under the specified range. With the Bootstrap version 3.2.0, there is breakpoint which comes in three versions and each of the CSS display property value: inline, block and inline-block.

Create Fixed Layout with Bootstrap

You can create various types of web pages based on the fixed number of pixels. The process of creating fixed layout with Bootstrap comes with a .container class and after that you need to create rows with the .row class to wrap the horizontal group of columns.

How to Create Fluid Layout with Bootstrap

The bootstrap version 3.2 onwards, one can use .container fluid in order to create the fluid layouts in order to utilize the 100% width of the viewport. The class .container-fluid simply applies the horizontal margin with the value auto and left and right padding of 15px on element to offset the left and right margin of -15px (i.e. margin: 0 -15px;) used on the .row.

What is Responsive Web Design or Layout

Responsive design process or layout is a process of designing and building websites with better accessibility and better viewable experience for the user. With the better trending smart phone devices and tablets, it has become important to optimize the devices and create preferred alternative design for better functionality for these devices. With the help of responsive layouts, one can adjust and adapt the device screen be it laptop, mobile or tablet.

Responsive Layout with Bootstrap

One can create responsive layout using Bootstrap and it can help in creating more mobile friendly websites. Bootstrap 3 is more mobile friendly and has better control for all devices.

Working with Headings

One can define HTML headings with utilizing heading classes on other elements. Following is the example code.

	
	<h1> h1. Bootstrap heading</h1> 
    <h2> h2. Bootstrap heading</h2> 
    <h3> h3. Bootstrap heading</h3> 
    <h4> h4. Bootstrap heading</h4> 

What are Tables in Bootstrap?

HTML tables are used to present the data in fine grid manner in terms of row and columns. Using Bootstrap, one can improve the appearance of table in simplified way. You can create tables using simple styling, dividers and small cell padding by simply using class.table to <table > element.

How to create lists using Bootstrap

One can define three types of lists- Unordered, Ordered and Definition List. In the unordered list, the list of items and not ordered in matter whereas in ordered list, items are explicitly ordered. In definition list, a list of terms with associated descriptions.