Bootstrap is feature-rich and the most widely used HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. This framework give an efficient way to build solid websites and web applications, saving many hours of coding with pre-built blocks of code.
We can easily customize the CSS and components of grid system based on user needs.
The process of installation is simple, download it easy from http://getbootstrap.com/ and once after unzipping, you have to include the files in the head of your HTML document something like the below
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootsrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script src="js/bootstrap.min.js"></script> </head> <body> </body> </html>
<meta> Tag is vital since Bootstrap was first originally focused on Mobile-first approach. You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.
To turn responsive, include the “bootstrap-responsive.css” file in the header section like as below:
<link rel=”stylesheet” type=”text/css“href=”css/bootstrap-responsive.css“>
Being built on responsive 12-column grids, layouts and components, switching to fixed or responsive is made easy in a matter of few changes. Pull and offset as well as nesting columns are also possible.
Let’s see a sample of Mobile view built on Bootstrap
- Rows must be placed within a .container class for proper alignment and padding represented as .container (fixed-width) or .container-fluid (full- width).
- Use rows to create horizontal groups of columns.
- The grid options are
- Col-xs-* (upto 12 columns) for extra small devices like phone (width<768px)
- Col-sm-*(upto 12 columns) for small devices like tablet(width>=768px)
- Col-md-*(upto 12 columns) for medium devies like desktop(width>=992px)
- Col-lg-*(upto 12 columns) for extra large device like large desktop (width=>1200px)
- Content should be placed within columns, and only columns may be immediate children of rows.
<div class=`` container or container-fluid”> <div class=``row”> <div class=`` col-*-*”> --- > Content Here <----- </div> </div> </div>
Another useful feature of Bootstrap is the option to decide if to hide/display certain blocks of content based on the screen size. Additionally, adding class like .visible-desktop let content visible only to desktop and similarly can be set for tablet and phone.
Styling HTML Elements
A website has different elements such as heading, lists, forms, and buttons and so on. All fundamental HTML elements are styled and enhanced with expansible class.
The HTML elements for which styles are provided are:
Extensible List of Components
The drop down menus pagination and alert boxes, Bootstrap has got your covered.
We can easily customize styling of individual elements of themes in few minutes.
Pre styled components are
- Button Groups
- Navigation Bar
- Labels & Badges
- Progress Bar & many.
Group of Java scripts
Advantages of Bootstrap
- The most attractive advantage is it is easy to customize the way you need.
- Bootstrap responsive feature make websites render perfect on Desktop, Laptop and Mobile phones.
- Bootstrap is compatible with all major and latest browsers and of course with all operating systems, it supports Android, IOS, Mac and Windows.
- Bootstrap releases more updates compared to other frameworks to ensure that wide range of cross browser and cross device compatibility.
- Bootstrap provide good documentation and great support for learning and development process.
Of all, Bootstrap gives you enough support to work ease & fast.
Bootstrap offers styling almost every element of typical website or web application as required, it provide a great documentation with examples and demo that only make it as more efficient than others. Besides, Bootstrap has a huge support community behind it so you can easily get support when you run into issues.
Go, Get started with Bootstrap!