Question 15:

What is grid system in bootstrap?

Bootstrap provides a responsive grid system that appropriately scales up to 12 columns as the device or viewport size increases. To create a responsive layout using bootstrap 12 column structure these points need to be considered

All the rows must be placed inside of a div having class .container or .container-fluid

Create a div having class .row to group column

Add columns inside row as immediate children of row

Place all content inside columns

There are pre-defined classes for columns. These classes are col-md-*, col-sm-*, col-lg-*, col-sx-*where * represent number from 1 to 12. These classes take effect as per viewport of the device.

Below diagram describes the simple layout of a web page.

if a row has column with class .col-sm-4 then it mean it will occupy first 4 column for small device and full width in extra small device.

similarly column with class .col-sm-8 will occupy next 8 column in the row and full width for extra small device.

Question 16:

What is column offset in bootstrap?

Column offset in bootstrap provides a more flexible approach for creating layouts. Use class .offset* to shift column right side of the screen. Here * represents number of columns to be shifted. E.g. If there is a class .offser4 on a div then it will shift 4 column from left side towards the right side of the screen.

Question 17:

What is column ordering and how it works?

In bootstrap columns are displayed in the order in which they are defined. Now If there is a requirement to change the ordering of columns then we can use column ordering classes defined in bootstrap. We have following 2 classes for column ordering;

.col-md-push- *

.col-md-pull- *

Here * represents the number of columns to be ordered.

Note: push and pull are relative. If you push a column towards right then you need to pull a column towards left in order to keep design consistent. In place of md we may also use sm, lg, xs depending the size of the screen for which you want to implement column ordering.

Question 18:

Describe a real-time implementation of column ordering? or Describe a situation where you have used column ordering.

Consider a website in which we have site navigation on the left-hand side and the main content at the right-hand side. Left Navigation is taking 3 columns and main content of the website is taking 9 columns of total 12 column grid structure. This type of structure works well in large, medium and small devices but at mobile devices this structure will not work as mobile devices are very small. So in this situation, we may use column ordering to pill main content 3 column left and push navigation item 9 column towards the right side of the screen.

So we will have our main content which user want to see at the top and navigation item will be stacked down.

Question 19:

How to hide any element in the mobile device only and display in other devices?

Bootstrap provide .hidden-xs class to hide any control from mobile devices. The element having class .hidden-xs will not be displayed in the mobile device and will be displayed in other larger devices.

Similarly, elements having .hidden-sm class will not be displayed in small devices, .hidden-md class elements will not be displayed in medium devices and .hidden-lg class elements will not be displayed in large devices.

Question 20:

What is Jumbotron in bootstrap?

A lightweight, flexible component that can extend the entire viewport to showcase important content on the website. Generally used to display main content on top of the page. Use Class="jumbotron" to create Jumbotron.

Bootstrap

Bootstrap is HTML, CSS and JavaScript framework for developing responsive, mobile first websites. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.