Bootstrap Interview Questions | Page 2


Question 11:

What are the types of layout available in Bootstrap?

Bootstrap provide the following type of layouts

  • Fixed Layout
  • Fluid Layout
Question 12:

What is fixed layout?

Provide a common fixed width layout. Use class="container" for fixed layout

<body>
<div class="container">
..
</div>
</body>
Question 13:

What is fluid layout?

Fluid layout is uses 100% wide and uses the full width of the screen. Use class = "container-fluid" to create a fluid layout.

<div class="container-fluid">
<div class="row-fluid">
...

</div>

</div>
Question 14:

What are the visual breakpoints in Bootstrap?

There are 4 different visual breakpoints in bootstrap.

Name Class Screen size Device example
Extra small device xs <768px Mobile device
Small device sm >=768px and <992px Tablet
Medium device md >=992px and <1200 px Desktop
Large devices lg >= 1200px Large desktop
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.

Bootstrap grid structure


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.

Example

<div class="row">
  <div>...</div>
  <div class="offset3">
  ...
  </div>
</div>
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.

Example

<div class="row">
  <div class="col-md-3 col-sm-push-9">
     <aside>Left Navigation</aside>
  </div>
  <div class="col-md-9 col-sm-pull-3">
     <article>Main content</article>
  </div>
</div>
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.

<div class="row">
  <div class="col-md-3 col-sm-push-9">
     <aside>Left Navigation</aside>
  </div>
  <div class="col-md-9 col-sm-pull-3">
     <article>Main content</article>
  </div>
</div>
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.

show hide content

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.

Example

<div class="jumbotron">
  <h1>Bootstrap</h1>
  <p>...</p>
  <p><a class="btn btn-success btn-lg" href="#" role="button">Start Learning</a></p>
</div>

Preview

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.

Start Learning

Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media