Bootstrap

1. What is Bootstrap ?

Bootstrap is a front-end framework that is used for creating HTML, CSS, and JS web applications. Its layout is very responsive, easy and fast to use. It mostly focuses on building a mobile application with having design templates for creating UI like Dropdown, Forms, Buttons, Alerts Tab, etc.

Bootstrap is a HTML, CSS, and JS framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.

Bootstrap framework is mainly focused to simplify the web development process. It is one of the widely used front-end frameworks. There are tons of persuasive benefits of this technology that can allure you to use it for your next web project for sure.

2. What are the key components of Bootstrap ?

The key components of Bootstrap are

Reusable Components : It contains plenty of reusable layout components

CSS : It contains lots of CSS files

jQuery & JavaScript Plugins: It comprises many jQuery and JavaScript plugins

Scaffolding : It comes with a basic structure with link styles, grid system and background

Customization: You have a freedom to customize components as per your wish

3. Why to choose Bootstrap for building the websites?

There are few reason why we choose Bootstrap for building websites

Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers. Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.

4. What are class loader in Bootstrap ?

Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.

5. List down features of Bootstrap 4.

Bootstrap 4 released in August 2017 and added new features of flex modal for grid system and even added new components.

Let us see them one by one based on new features, improved and deprecated:

New Features

Bootstrap 4 came with .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label and match the size of the relevant form control.

For offset columns, Bootstrap 4 use offset-*-* classes.

Add dark tables with the .table-dark class in Bootstrap 4

For increasing or decreasing the input control size, Bootstrap 4 has .form-control-lg and .form-control-sm classes.

Create table head styles with .thead-light and .thead-dark classes.

Bootstrap 4 introduced the .btn-outline-* classes for styling buttons with an outline color.

To disable Menu Items in Bootstrap 4, you need to use the .disabled class . Set the class to the <a> to disable.

To fix navbars to the top and bottom, Bootstrap 4 introduced .fixed-top and .fixed-bottom classes.

Bootstrap 4 came with .jumbotron-fluid class for full-width jumbotrons.

For creating carousel item with Bootstrap 4, use the .carousel-item class.

Enhanced

Bootstrap 4 updated Global Form Size of 16px.

To create responsive images with Bootstrap 4, use .img-fluid class. The .img-responsive class was used in Bootstrap 3 for creating responsive images.

Introduction of cards in Bootstrap 4 replaced the functionality provided by Panels.

For checkbox and radio button, Bootstrap 4 use .form-check, .form-check-label, .form-check-input, and .form-check-inline. Bootstrap 3 used .radio, .radio-inline, .checkbox, or .checkbox-inline classes.

Bootstrap 4 introduced Cards to replace the functionality provided by wells in Bootstrap 3.

Deprecated (Not Supported)

Bootstrap 4 do not support any class for extra small button groups.

The .page-header class isn’t supported in Bootstrap 4.

The .btn-group-justified class is not supported in Bootstrap 4.

Bootstrap 4 deprecated the .btn-xs class. Rest, .btn-sm and .btn-lg are still available to resize buttons.

6. What is the role of jumbotron in bootstrap ?

Jumbotron is a component that allow you to set landing page content design. A big grey box is seen as Jumbotron for including special content with increase in size of headings. Including it will also add a lot of margins that would make the box and its content catchier.

Let us now see how to create a Jumbotron in Bootstrap. For that, use the class .jumbotron:

<div class=”jumbotron”>
  <h1>My Website</h1>
  <p>We provide freelancers for content, responsive website design, business writing, etc.</p>
</div>

Let us see the example:

<!DOCTYPE html>
<html lang=”en”>
<head>
  <title>Bootstrap Demo</title>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
  <div class=”jumbotron”>
    <h1>My Website</h1>
    <p>We provide freelancers for content, responsive website design, business writing, etc.</p>
  </div>
  <p>Text outside Jumbotron</p>
</div>
</body>
</html>

7. Differentiate between Bootstrap and Foundation.

Bootstrap	Foundation
Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Mark Otto and Jacob Thornton released it on GitHub in August 2011.	It is a front-end framework designed by ZURB in September 2011. They claim to be the most advanced responsive front-end framework. It is readable, flexible, and completely customizable.
Bootstrap support responsive grids and flexible breakpoints.	Foundation supports whatever Bootstrap has, but also provides responsive gutters.
Bootstrap has .form-inline class which is to be added to the <form> tag to create Inline Forms. These are the forms in which the elements are inline and left-aligned.	With Foundation, you cannot create Inline Forms.
Bootstrap has mobile first styles in its library. The same is part of the Bootstrap core framework and its grid system allows the designers to design websites sites for small screens first and then move and scale designs up from there.	Build for small devices first and the scale to larger devices and create responsive design.
Design can be customized in Bootstrap.	Design can be customized in Foundation, but not better than Bootstrap.

8. What are the types of layout available in Bootstrap?

In Bootstrap there are two types of Layout available

Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen.

Fixed Layout: For a standard screen you will use fixed layout (940 px) option BootStrap.

9. What is Bootstrap Grid System ?

For creating page layout through a series of rows and columns we use grid system. we can make up to 12 columns across a page. There are different classes which have been defined for this for the UI purpose.

10. List down Grid classes in Bootstrap.

xs (It is used for phone screens less than 786px wide).

sm (It is used for the tablet screens which are greater than 786px wide).

md (It is for small laptop screen of size equal to or greater than 992px wide).

LG ( It is for laptop and desktop screens which are equal to greater than 1200px wide).

11. What is column ordering in Bootstrap ?

Column ordering is one of the feature available in bootstrap and you can easily write columns in an order and show them in another one. With .col-md-push-* and .col-md-pull-* the order of the column can be easily changed.

12. What is bootstrap container ?

Bootstrap container is a class which is useful and creates a centred area within the page where our site content can be put within. The advantage of the bootstrap .container is that it is responsive and will place all our other HTML code.

13. What is progress bar in bootstrap ?

Progress bar is used with HTML tag style in HTML element using progress keyword. In bootstrap we used html5 progress with CSS classes that have special features in bootstrap, that is only made for the progress bar.

14. What are responsive utility classes in bootstrap ?

Responsive utility classes in bootstrap are a set of classes which are used to conceal or exhibit the HTML elements based on screen resolution that discerns by media query in bootstrap.

Example: “hidden-md-down”, It hides

15. What is Modal plugin in Bootstrap ?

A modal is a child window that is layered over its parent window. Using a custom Jquery Plugin, Bootstrap Modal are created. To enrich user experience and to add functionality to users, modal windows are created with the help of Modal plugin.

16. What is Bootstrap collapsing elements ?

Bootstrap collapsing elements enables you to collapse any particular element without writing any JavaScript code or the accordion markup. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)

17. What is Bootstrap well ?

Bootstrap well is a container div that makes the content to appear lowered on the page. In order to create a well, wrap the content that you would like to appear in the well with a div containing the class of .well.

18. What is alert component in Bootstrap ?

To create alert messages on your website, work with the Alert component in Bootstrap. We will use the .alert class for this purpose

The alert class also has some contextual classes associated with it for action on alert box:

.alert-success: Successful or positive action
.alert-info: Informative action
.alert-warning:
.alert-danger: Dangerous action
.alert-primary: Important action
.alert-secondary: Less important action
.alert-light: Light grey
.alert-dark: Dark grey
Let us now see how we can use them:
<!DOCTYPE html>
<html lang=”en”>
<head>
  <title>Bootstrap Demo</title>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
  <h2>Learning about Alerts Components</h2>
  <div class=”alert alert-success”>
    <strong>Success! </strong>
  </div>
  <div class=”alert alert-info”>
    <strong>Information!</strong>
  </div>
  <div class=”alert alert-warning”>
    <strong>Warning! </strong>
  </div>
  <div class=”alert alert-danger”>
    <strong>Danger! </strong>
  </div>
  <div class=”alert alert-primary”>
   <strong>Primary!</strong>
  </div>
  <div class=”alert alert-secondary”>
    <strong>Secondary!</strong>
  </div>
  <div class=”alert alert-dark”>
   <strong>Dark alert!</strong>
  </div>
  <div class=”alert alert-light”>
   <strong>Light alert!</strong>
  </div>
</div>
</body>
</html>

Output:

19. What is a Tooltip component in Bootstrap ?

You may have seen a small pop-up box appearing when the user hovers over an element. The same box is what we can add using the Tooltip component in Bootstrap.

Use the data-toggle=”tooltip” attribute to create a tooltip in Bootstrap. To work with tooltips, you need to initialize them with jQuery.

You can also position the tooltip using the data-placement attribute. Let us now see an example that creates a tooltip:

<!DOCTYPE html>
<html lang=”en”>
<head>
  <title>Bootstrap Demo</title>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container-fluid”>
  <h3>Bootstrap Tooltip Example</h3>
  <a href=”#” data-toggle=”tooltip” data-placement=”right” title=”This is a tooltip!”>Hover mouse cursor here</a>
    <p>Above is a tooltip on the right</p><br>
</div>
<script>
$(document).ready(function(){
  $(‘[data-toggle=”tooltip”]’).tooltip();
});
</script>
</body>
</html>

Output:

For positioning tooltip on left, top and bottom, use the following values for data-placement attribute:

<div class=”container-fluid”>
  <a href=”#” data-toggle=”tooltip” data-placement=”left” title=”This is a tooltip!”>Keep mouse cursor here</a>
  <a href=”#” data-toggle=”tooltip” data-placement=”top” title=”This is a tooltip!”>Keep mouse cursor here</a>
  <a href=”#” data-toggle=”tooltip” data-placement=”bottom” title=”This is a tooltip!”>Keep mouse cursor here</a>
</div>

20. Why should we use Button Groups in Bootstrap ?

If you want a series of buttons on your website, then use the Button Groups in Bootstrap. It allows you to stack more than one button on a single line.

The Button Groups component in Bootstrap has some classes to create Button group, resize them, stack them vertically, etc. Let us see them first:

.btn-group class: Create a Button Group
.btn-group-lg: Larger buttons in Button Groups
.btn-group-sm: Smaller buttons in Button Groups

Let us now see a simple example to create Button Groups in Bootstrap. The example displays 5 buttons in the same button group:

<!DOCTYPE html>
<html lang=”en”>
<head>
  <title>Bootstrap Demo</title>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container-fluid”>
 <p>Displaying Button Groups in Bootstrap:</p>
  <div class = “btn-group”>
   <button type = “button” class = “btn btn-default”>Button 1</button>
   <button type = “button” class = “btn btn-default”>Button 2</button>
   <button type = “button” class = “btn btn-default”>Button 3</button>
   <button type = “button” class = “btn btn-default”>Button 4</button>
   <button type = “button” class = “btn btn-default”>Button 5</button>
   <button type = “button” class = “btn btn-default”>Button 6</button>
  </div>
</div>
</body>
</html>

The following is the output that displays buttons in a single Button Group:

21. What is Bootstrap thumbnail ?

When we develop our website or web application that contain images, videos, dialogues, quotes, etc. Most of the times, we want to display them in grids. The classes that help us achieve it are “img-thumbnail” and “thumbnail”. For e.g.,

<img src=”hello.jpg” class=”img-thumbnail” alt=”Tutorials” width=”250″ height=”200″>

22. Which class is used for pagination in bootstrap ?

 Pagination is required for the sequencing of a large number of pages on a website. This makes it easier to go through the pages without missing any link.

In Bootstrap, it is achieved by using a class called “pagination”.

Example of use:-

<ul class=”pagination”>
<li><a href=”page1.html”>1</li>
<li><a href=”page2.html”>2</li>
<li><a href=”page3.html”>3</li>
</ul>

23. Explain the use of carousel  plugin in Bootstrap ?

The Bootstrap carousel is an efficient and responsive way to include a slideshow in your site. It can display content like images, videos, user markups or almost any type of content.

Example of use:-

<div class=”container”>
<h2>Slide Show</h2>
<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>
<ol class=”carousel-indicators”>
<li data-target=”#mySlideShow” data-slide-to=”0″ class=”active”></li>
<li data-target=”#mySlideShow” data-slide-to=”1″></li>
<li data-target=”#mySlideShow” data-slide-to=”2″></li>
</ol>
<div class=”carousel-inner”>
<div class=”item active”>
<img src=”iphone.jpg” alt=”iPhone” style=”width:100%;”>
</div>
<div class=”item”>
<img src=”poco.jpg” alt=”PocoF1″ style=”width:100%;”>
</div>
<div class=”item”>
<img src=”mi.jpg” alt=”Redmi” style=”width:100%;”>
</div>
</div>
<a class=”left carousel-control” href=”#mySlideShow” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”right carousel-control” href=”#mySlideShow” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
</div>

24. What do you understand by a list group in bootstrap and its use ?

List group is a powerful and flexible component to display simple and complex elements together with custom contents. A simple list group is created using class .list-group to address the list with usage of element, and class .list-group-item to address individual item with usage of elements.

25. What is bootstrap page header ?

The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them. To use a page header, wrap your heading in a with a class of .page-header.

26. 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.

	Extra small devicesPhone(<768px)	Small devicesTablet (>=768 px)	Medium devicesDesktops(>=992px)	Large devicesDesktops (>=1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

27. Explain input group in Bootstrap.

While taking input from the user, one would want to give a better look and feel of the input box to the users probably by giving a description of the input to be provided or the format of input to be given, etc.

Bootstrap provides a class called “input-group”, it enhances an input by adding an icon, text or a button in front or behind the input field.

To set the position of the help text, one of these two classes are used

i) “input-group-prepend” to add it in front of the input.

ii) “input-group-append” to add it behind the input.

And finally, to add and style the specific text use “input-group-text”.

28. What are different shapes for image in bootstrap ?

By Default bootstrap provides 3 classes for image shape.

Rounded image

Circle shape image

Thumbnail image

Example:

<img src=””; alt=”rounded image” class=”img-rounded”>
<img src=””; alt=”circle image” class=”img-circle”>
<img src=””; alt=”thumbnail image” class=”img-thumbnail”>  

29. Write the ways to create a tabbed navigation menu in Bootstrap.

Bootstrap provides a base “nav” class to create basic navigation components like tabs.

Tabs are created with <ul class=”nav nav-tabs”> and to mark the current page we use <li class=”active”>.

Example of use: –

<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”courses.html”>Courses</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>

30. In Bootstrap, how can you create a pills navigation menu ?

Pills are created with <ul class=”nav nav-pills”> and to mark the current page we use <li class=”active”>.

Example of use: –

<ul class=”nav nav-pills”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”courses.html”>Courses</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>

31. How does navbar work in Bootstrap ?

Bootstrap provides a feature of navigation panel which is placed at the top of the page for easy navigation through the site.

“navbar” class is used for creating a scalable and flexible navigation bar for a web page that extends and collapses depending on the device’s screen size.

Navbars are wrapped with navbar-expand(-sm/-md/-lg/-xl) for responsive collapsing. By default, Navbars and their contents are fluid. We use optional containers to limit their horizontal width.

However, navbars are responsive by default but we can use the collapse plugin to manipulate it. The navbar includes styling for site names and basic navigation.

You cannot print navbars as they are hidden, to print them you would have to add “d-print” to the navbar class.

32. What is Bootstrap breadcrumb ?

Bootstrap breadcrumb shows the current page’s location within a navigational hierarchy. It shows your current location on the website and provides a link to each previous page with a separator added after each page title. Eg., home / tutorials / java / string / methods “breadcrumb” class is used to create the path.

33. What are labels in Bootstrap ?

Bootstrap provides a class called “label”, that is used to display some extra information or tips about something on a page. For example, if we are providing a tutorial on a certain language say C++, labels can be used to inform the expertise level before taking up the course. So, C++ can have labels like “Beginners”, “Pro” etc.

Modifier classes such as label-default, label-primary, label-success, label-info, label-warning, label-danger are used to determine the look plus the intensity of a label.

34. What are badges in Bootstrap ?

Bootstrap badges are just other labels with rounded edges mostly used as numerical indicators like on top of a mailbox icon to show the number of unread emails.

The bootstrap class “badge” is used to create it along with modifier classes like badge-primary, badge-secondary, badge-danger, badge-warning, etc., to style the badges.

35. How can we make an image responsive in Bootstrap ?

There are a number of various kinds of devices that we use to surf the internet nowadays from a Fitbit to an iPad. The images in our websites or web apps must fit into all different screen sizes for better user experience.

Bootstrap provides a class called “img-responsive” which is add to the <img> in order to make the image responsive. This class applies the following three properties to the image — display: block, max-width: 100% and height: auto.

36. What do you mean by normalizing in Bootstrap ?

Normalizing means bringing something into a standard shape. Normalize.css, which is also known as browser/CSS reset, is a most popular styling component that makes all the browsers render all elements more consistently so that your CSS styling doesn’t change as the browser changes.

37. What is lead body copy in Bootstrap ?

Bootstrap provides a range of classes to apply different styles to the content/HTML elements. One such class is “lead”, that makes a paragraph stand-out and emphasize it, in turn, attracting more attention from the user.

Example of use: –

<p class=”lead”>This is an important paragraph</p>

39. What are panels in Bootstrap ?

Bootstrap provides a class called “panel” that adds borders around content with some padding. It can be used to display your shopping cart on an e-commerce site or shares of different companies in a stock market site.

Example of use: –

<div class=”panel panel-default”>
<div class=”panel-body”>Bootstrap panel content Example</div>
</div>

40. What is a scrollspy plugin in Bootstrap ?

As the name suggests, the scrollspy feature would spy/detect your scroll position in a webpage and based on that it would update page links in the navigation list about their current position in the site while the content on the viewport will change accordingly.

To create scrollspy, add data-spy= “scroll” to the <body> then to make sure that the navbar is connected with the scrollable area, add data-target with a value of the id or the class name of the navigation bar.

41. What are global styles that are used in Bootstrap Default Typography?

Bootstrap 4 onwards the default values/global styles for different typography properties are as follows: –

* font-size = 16pixels
* line-height = 1.5
* font-family = “Helvetica Neue”, Helvetica, Arial, sans-serif.
* <p> – margin-top: 0 and margin-bottom:16pixels

42. What dependencies does Bootstrap require to work properly ?

 Below are the 3 main dependency required for Bootstrap to work well:-

i) CSS: – <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>

ii) jQuery Library: – <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>

iii) JavaScript: –

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

43. What are Glyphicons in Bootstrap ?

Glyphicons are the symbols or icons used to represent a text graphically. Bootstrap includes 250 glyphicons from the Glyphicons Halflings set.

Syntax: –

<span class=”glyphicon glyphicon-name”></span>

here, the word “name” will be replaced by a proper glyphicon name like glyphicon-envelope, glyphicon-cutlery, glyphicon-credit-card, glyphicon-earphone, glyphicon-camera, and so on.

Output will look like:

44. What is a transaction plugin in Bootstrap ?

Transition plugin is used to include some transitioning effects in a component like fading in and fading out of a pop-up/modal. Example of use: –

<div id=”newModal” class=”modal fade” role=”dialog”>

45. Explain what are the steps for creating basic or verticals forms ?

The steps for creating basic or vertical forms are

Add a role form to the parent <form> element

Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed

Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements

46. Explain what media object in Bootstrap is and what are their types?

Media objects in Bootstrap enables to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the class .media and the source is specified in using the class .media-object. Media-objects are of two types,

They are of two types

.media

.media-list

47. Which classes cab be applied to button group instead of resizing each button ?

.btn-group-lg, .btn-group-sm, .btn-group-xs classes can be applied to button group instead of resizing each button.

48. What is affix plugin ?

The affix plugin allows to become affixed to a location on the page. You can also toggle it’s pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hits a certain mark, the will be locked in place and will stop scrolling with the rest of the page.

49. How to create a form using bootstrap ?

By default HTML provides styling to all form controls e.g. input, textarea, select, checkbox, radio button e.t.c. Use .form-group class to group control and its label. 

Bootstrap provide 3 types of form

Basic form – Default width of controls are 100%.

Inline form – Use .form-inline class with form tag to create inline form.

Horizontal form – Use .form-horizontal class with form tag to create horizontal form.

Example – Basic form

<form>
  <div class=”form-group”>
    <label for=”txtEmail”>Email address</label>
    <input type=”email” class=”form-control” id=”txtEmail” placeholder=”Your email address”>
  </div>
  <div class=”form-group”>
    <label for=”txtPassword”>Password</label>
    <input type=”password” class=”form-control” id=”txtPassword” placeholder=”Password”>
  </div>
  <button type=”button” class=”btn btn-default btn-success”>Login</button>
</form> 

Output: 

50. How to create an inline form in bootstrap ?

Bootstrap provides .form-inline class with form tag to create inline form.

Example – Inline Form

<form class=”form-inline”>
  <div class=”form-group”>
    <label for=”txtEmail1″>Email address</label>
    <input type=”email” class=”form-control” id=”txtEmail1″ placeholder=”email”>
  </div>
  <div class=”form-group”>
    <label for=”txtPassword1″>Password</label>
    <input type=”password” class=”form-control” id=”txtPassword1″ placeholder=”Password”>
  </div>
  <button type=”button” class=”btn btn-default btn-success”>Login</button>
</form>  

Output:

51. How to create Horizontal Form in bootstrap ?

Bootstrap provides .form-horizontal class to create a horizontal form. Use this class with HTML form tag.

Example – Horizontal Form

<form class=”form-horizontal”>
  <div class=”form-group”>
    <label for=”txtEmail3″ class=”col-sm-2 control-label”>Email</label>
    <div class=”col-sm-10″>
      <input type=”email” class=”form-control” id=”txtEmail3″ placeholder=”Email”>
    </div>
  </div>
  <div class=”form-group”>
    <label for=”inputPassword3″ class=”col-sm-2 control-label”>Password</label>
    <div class=”col-sm-10″>
      <input type=”password” class=”form-control” id=”inputPassword3″ placeholder=”Password”>
    </div>
  </div>
  <div class=”form-group”>
    <div class=”col-sm-offset-2 col-sm-10″>
      <button type=”submit” class=”btn btn-default btn-success”>Login</button>
    </div>
  </div>
</form>  

Output:

52. List down form controls supported by bootstrap.

Bootstrap supports all the basic HTML 5 form controls. Below are supported form controls.

Text

Password

Datetime

Datetime-local

Date

Month

Time

Week

Number

Email

Url

Search

Tel

Color

53. What are the default buttons in bootstrap ?

Bootstrap provide a large set of classes to create buttons. Use .btn .btn-default class to create a default button in bootstrap. Bootstrap provides the following default buttons

Bootstrap provides the following classes to provide different styling to buttons.

Default – Use .btn-default class to display default button.

Primary – Use .btn-primary class to display primary button.

Success – Use .btn-success class to display success button.

Info – Use .btn-info class to display info button.

Warning – Use .btn-warning class to display warning button.

Danger – Use .btn-Danger class to display Danger button.

Link button – Use .btn-link class to display link button.

Example:

<button type=”button” class=”btn btn-default”>Default</button>
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-success”>Success</button>
<button type=”button” class=”btn btn-info”>Info</button>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=”btn btn-danger”>Danger</button>
<button type=”button” class=”btn btn-link”>Link</button>

Output:

54. How to create menu items ?

Bootstrap provide responsive navbar to display at the top of the application containing all navigation items. Navbar comes with toggle functionality which allow navbar to stack vertically in mobile devices. Use .navbar .navbar-default class to create navbar.

We can add Brand name, logo, links, buttons, form and drop-down control in the navbar.

Navbar have 3 sections left, middle and right.

Example

<nav class=”navbar navbar-default”>
  <div class=”container-fluid”>
    <div class=”navbar-header”>
      <button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
        <span class=”sr-only”>Toggle navigation</span>
        <span class=”icon-bar”></span>
        <span class=”icon-bar”></span>
        <span class=”icon-bar”></span>
      </button>
      <a class=”navbar-brand” href=”#”>Brand</a>
    </div>
    <div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
      <ul class=”nav navbar-nav”>
        <li class=”active”><a href=”#”>Item 1<span class=”sr-only”>(current)</span></a></li>
        <li><a href=”#”>Item 2</a></li>
        <li><a href=”#”>Item 3</a></li>
      </ul>
      <ul class=”nav navbar-nav navbar-right”>
        <li><a href=”#”>Item 4</a></li>
      </ul>
    </div>
  </div>
</nav>

Output: 

55. How to create tabs in bootstrap ?

Bootstrap provide .nav-tabs class to create tabs.

Example

<ul class=”nav nav-tabs”>
  <li role=”presentation” class=”active”><a href=”#”>Home</a></li>
  <li role=”presentation”><a href=”#”>Profile</a></li>
  <li role=”presentation”><a href=”#”>Message</a></li>
  <li role=”presentation”><a href=”#”>Settings</a></li>
</ul>  

56. What is font awesome ?

Font awesome provides scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Font Awesome works well with bootstrap and other javascript framework.