1.What is Bootstrap?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 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.

Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

2.What are the different ways of adding bootstrap to a web project?

Bootstrap can be simply included in a web project by using the <link> and <script> tags in the in header of the HTML document. The <link> tag is used to include the Bootstrap stylesheet in the project while the <script> tag is used to include the JavaScript files that come with Bootstrap. 

You can choose to download all the files and put them in the project but you can also choose to use a CDN to include the Bootstrap files. Both ways have their own advantages.

3.What is the current version of Bootstrap?

The current stable version of Bootstrap is 4.1.

4.Why would you choose Bootstrap over regular CSS files?

Bootstrap is a CSS framework. It lets you build your websites quickly without writing all the basic building blocks from scratch all over again. It saves a lot of times and let the developers focus on the business logic. It also ships with a lot of built-in styles, standard components and CSS classes that we use out-of-the-box to scaffold a web app easily.

Bootstrap also lets us build completely responsive websites which means that the websites adjust themselves according to the site of the screen and therefore they look equally good on all screen sizes and platforms.

All these things are built right into the framework and we can simply use these features.

5.Explain the Bootstrap Grid system.

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.

There are 3 simple rules that you need to follow when using Bootstrap Grids to create layouts.

  • Columns must be the immediate child of a Row.
  • Rows are only used to contain Columns, nothing else.
  • Rows should be placed inside a Container.

Those rules are very important. The Rows & Columns always work together, and you should never have one without the other.

The Container acts as the outermost box inside which the rows live. In each row, there must be columns that divide the row, width-wise. The Bootstrap row can be thought of already divided into 12-columns, width-wise. You cannot see these columns but all these columns are of equal width. Columns create horizontal divisions across the viewport. The space between the columns is called the “gutter”.

When you create your own Columns inside the Row, you have to define how many width units (of the total available 12 units) do you want to allocate to a column. You can do that by adding certain classes to the column divs. However, if you do not specify classes specifying the width for each column, all the columns will divide the available width equally.

Here is an example code that creates three equal-width-columns.

<div class="container">
   <div class="row">
     <div class="col-sm">
       One of three columns
     </div>
     <div class="col-sm">
       Two of three columns
     </div>
     <div class="col-sm">
       Three of three columns
     </div>
   </div>
</div>
 

Columns in the same Row layout horizontally across, and then stack vertically down. This vertical “stacking” or “wrapping” occurs when the Column units in a single Row exceed 12. This is known as “Column Wrapping”.

6.What are the different color classes available in Bootstrap 4?

The main colors classes in Bootstrap 4 are:

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning 
  • Info
  • Light
  • Dark

7.How would you create a simple button using the classes in Bootstrap 4?

<button class="btn btn-primary">This is a Button</button> 

8.Who created Bootstrap?

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

9.What are the different breakpoints in Bootstrap 4 to implement responsiveness?

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
 
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
 
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
 
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
 
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

10.What are the units of measurement that Bootstrap uses to measure different sizes and widths?

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

11.What are the space utilities in Bootstrap 4?

We use the margin and padding spacing utilities to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a 1rem value default $spacer variable. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m – for classes that set margin

p – for classes that set padding 

Where sides is one of:

t – for classes that set margin-top or padding-top

b – for classes that set margin-bottom or padding-bottom

l – for classes that set margin-left or padding-left

r – for classes that set margin-right or padding-right

x – for classes that set both *-left and *-right

y – for classes that set both *-top and *-bottom

blank – for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 – for classes that eliminate the margin or padding by setting it to 0

1 – (by default) for classes that set the margin or padding to $spacer * .25

2 – (by default) for classes that set the margin or padding to $spacer * .5

3 – (by default) for classes that set the margin or padding to $spacer

4 – (by default) for classes that set the margin or padding to $spacer * 1.5

5 – (by default) for classes that set the margin or padding to $spacer * 3

auto – for classes that set the margin to auto

We can add more sizes by adding entries to the $spacers Sass map variable.

12.What are different button colors in Bootstrap?

Following are the available styles for buttons in Bootstrap.

  • .btn-primary
  • .btn-secondary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-light
  • .bht-dark
  • .btn-link

13.How would you make a button larger?

We can do that using the btn-lg class. It changes the button’s size to larger than the default size.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

14.How would you make a button smaller?

We can do that using the btn-sm class. It changes the button’s size to larger than the default size.

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Large button</button>

15.What is a card in Bootstrap?

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace the old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. 

<div class="card">
   <img class="card-img-top" src="..." alt="Card image cap">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

16.What is a Carousel in Bootstrap?

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Here is an example.

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

17.What is a Alerts in Bootstrap?

Alert in Bootstrap provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. There, colors can be configured so as to display success messages, errors and information to the user.

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

18.How would you create a Progress Bar in Bootstrap?

In Bootstrap, Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring that we can stack progress bars, animate them, and place text labels over them.

  • We use the .progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
  • The .progress-bar also requires some role and aria attributes to make it accessible.

Put that all together, and you have the following examples.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

19.Explain the Additive and Subtractive border utilities in Bootstrap?

In Bootstrap, we can choose to have all or some borders around a div. With additive borders, we get all the borders and we can also choose the ones that we want to have. With subtractive borders, we get no borders and we can also choose to remove the ones we do not want. 

Here is an example of additive and subtractive borders.

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

20.How would you specify border colors in Bootstrap?

To specify border colors, we can simply use the colors classes with the border- prefix. Here are a few example.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

21.How would you specify border radius in Bootstrap?

We can use the following classes to get rounded borders.

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

22.How would you add a background color to a div in Bootstrap?

In Bootstrap, we can use the bg-<color-name> classes to specify background colors in Bootstrap. Here are a few examples.

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

23.How would you change the case of the text in Bootstrap?

In Bootstrap, we use the classes text-lowercase, text-uppercase and text-capitalize to change the case of the text as and when required. Here is an example of the three classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Output:

lowercased text.

UPPERCASED TEXT.

CapiTaliZed Text.

24.How would you add icons in your project using Bootstrap?

Bootstrap doesn’t include an icon library by default, but we have a handful of options to choose from. While most icon sets include multiple file formats, Bootstrap recommends SVG implementations for their improved accessibility and vector support.

Iconic and Octicons are ones recommended by Bootstrap.

To use Iconic, for example, all we have to do is include the link tag to include the CSS file in the project, in the document’s header.

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

And then, use it like this.

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

In the above snippet, io-icon-name needs to be replaced with the correct name for an icon. 

25.What are breadcrumbs in Bootstrap?

Breadcrumbs depict the navigational hierarchy of a site, separators in the hierarchy are automatically added by means of CSS.

Bootstrap breadcrumb used for,

  • Documentation page
  • Magazine
  • ERP system

A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb.

26.What is a Jumbotron?

A jumbotron indicates a big grey box for calling extra attention to some special content or information. Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

All we have to do is use a <div> element with class .jumbotron to create a jumbotron.

<div class="jumbotron">
   <h1>Bootstrap Tutorial</h1> 
   <p>Bootstrap is the most popular HTML, CSS...</p> 
</div>

If you want a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or .container-fluid inside of it.

27.What are the bootstrap classes that you would use while designing a form?

Form controls automatically receive some global styling with Bootstrap. All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Normally, a .from-group and a .form-control class is used for each input inside the form. Here is an example.

<form action="/action_page.php">
   <div class="form-group">
     <label for="email">Email address:</label>
     <input type="email" class="form-control" id="email">
   </div>
   <div class="form-group">
     <label for="pwd">Password:</label>
     <input type="password" class="form-control" id="pwd">
   </div>
   <div class="form-group form-check">
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox"> Remember me
     </label>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

A wrapper element with .form-group is added around each form control to ensure proper margins.

28.What are the differences between Bootstrap and Foundation?

Foundation is a CSS framework designed by ZURB in September 2011. It has a slightly more advanced interface compared to other frameworks. Foundation is compatible on multiple browsers and hand-held devices. The responsive menu is one of its greatest assets. The menu is incredible when it comes to functionality and can also be easily styled using CSS. This responsive framework allows designers and developers to create elegant websites with more of a design-it-yourself approach.

Pros:

  • Design-it-yourself approach
  • Immense customization settings
  • Strong grid system
  • Provides rapid development of code
  • Easy to use templates available for download
  • Lightweight

Cons:

  • More complex when trying to customize
  • Not a great framework for beginners
  • Less popular than Bootstrap

Websites built in Foundation: Adobe, Amazon, Washington Post, Herschel Supply, Pixar Projection, EBay.

Bootstrap is the most commonly used CSS framework composed of HTML, JavaScript and CSS scripts. It was designed by former Twitter employees Mark Toto and Jacob Thornton. It was originally designed to be the interface used by Twitter to keep all the components and elements of their website consistent. Bootstrap has an immense amount of features that make coding a website easy and quick.

Pros:

  • Massive community support
  • Widest variety of themes
  • Best browser capability
  • Has both a fluid and fixed pattern grid system
  • More development tools available
  • Many popular websites are built on this framework

Cons:

  • Not as lightweight when compared to others
  • Difficult to use jQuery plugins
  • Websites are easily recognizable

Websites build in Bootstrap: Newsweek, Vogue, Indeed, NBA, Walmart, Code Academy.

29.What is the difference between container and container-fluid classes in Bootstrap?

container has one fixed width for each screen size in bootstrap (xs,sm,md,lg) whereas container-fluid expands to fill the available width.

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don’t exist in any form for container-fluid, so its width changes every time the viewport width changes.

30.How would you create a simple navigation bar in Bootstrap?

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl | lg | md |sm (stacks the navbar vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a <ul> element with class=”navbar-nav”. Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class.

Here is the code using all the above classes creating the simplest navigation bar.

<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
   <!-- Links -->
   <ul class="navbar-nav">
     <li class="nav-item">
       <a class="nav-link" href="#">Link 1</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link 2</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link 3</a>
     </li>
   </ul>
</nav>

31.What are Button Groups in Bootstrap?

Bootstrap 4 allows us to group a series of buttons together (on a single line) in a button group. We use a <div> element with class .btn-group to create a button group. Here is a simple example with its output.

<div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-secondary">Left</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Right</button>
</div>

32.What are Badges in Bootstrap?

Badges are used to add additional information to any content. Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

33.How would change the badges to look like pills (with rounded corners) in Bootstrap?

To create a pill-like badge in Bootstrap, we can use the .badge-pill modifier class.

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

34.What is collapse?

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, we cannot use padding on a .collapse element. Instead, we have to use the class as an independent wrapping element.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

    Button with data-target

  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

  </div>
</div>

35.How is pagination created in Bootstrap 4?

To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>.

The .active class can be used to highlight the currently selected menu item.

<ul class="pagination">
   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
   <li class="page-item"><a class="page-link" href="#">1</a></li>
   <li class="page-item active"><a class="page-link" href="#">2</a></li>
   <li class="page-item"><a class="page-link" href="#">3</a></li>
   <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

36.How can you align the pagination in Bootstrap 4?

We can use the utility classes to align the pagination.

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
   <li class="page-item">...</li>
</ul>
 
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
   <li class="page-item">...</li>
</ul>
 
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
   <li class="page-item">...</li>
</ul>

37.What is a tooltip and how would you create one in Bootstrap?

The Tooltip component is a small pop-up box that appears when the user moves the mouse pointer over an element. 

To create a tooltip, we add the data-toggle=”tooltip” attribute to an element and we use the title attribute to specify the text that should be displayed inside the tooltip.

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

38.What Bootstrap class would you use to create a striped table?

The .table-striped class adds zebra-stripes to a table. This can be used in combination with .table-dark class to get a dark-striped table.

39.How would you create an outline only button in Bootstrap 4?

To create an outline button, we need to use the btn-outline class. We can also use it in combination with the color classes as shown below.

<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>

40.If a button has disabled class applied on it, can it still be tapped or clicked on?

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links.

2 COMMENTS

  1. Dear Sir,

    I need your co-operation for a business Partnership.
    This Partnership will give us Hundreds of Millions of Dollars as profit.
    Kindly write to my personal email address below so that we can agree on terms and conditions..
    My Email: h66701824@gmail.com

    Sincerely yours,
    Andrei Ivanovich Lumpov,
    President of the expert consulting center ECC.
    “Invest-Project” Ltd. (Moscow).
    Email: h66701824@gmail.com