Bootstrap 4 - Multiple Choice Questions

Answer: d. All of the above

Explanation: Bootstrap 4 is a completely open - source and free to use product. It is especially useful and productive because it also gives the ability to build or create responsive web - pages.

Answer: a. Mark Otto and Jacob Thornton

Explanation: Bootstrap was originally named Twitter Blueprint. It was developed by Mark Otto and Jacob Thornton and it was released on 19th August 2011.

Answer: b. .danger

Explanation: The contextual class .danger can be used to indicates a dangerous or potentially negative action in Bootstrap 4.

Answer: b. .rounded

Explanation: The .rounded class is responsible for adding rounded corners to an image. The .rounded class can be used to make image corner rounded, this enhances the entire look of the website also.

Answer: b. 28 px

Explanation: The font size of <h3> in Bootstrap 4 is 1.75rem or 28px by default.

Answer: c. Prevents browsers from scaling desktop websites on mobile

Explanation: the meta tag - <meta name="viewport" content="width=device-width, initial-scale=1"> gives the browser instructions on how to control the dimensions of a page and the scaling in it.

Here, the width=device-width part sets the width of the page to follow the screen - width of the device that will vary depending on the device.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Therefore, this meta tag prevents the browsers from scaling desktop websites on mobile.

Answer: d. For the purpose of providing different icons

Explanation: Glyphicons is very essential in Bootstrap, this is because - it can be used to provide different icons for different purposes in Bootstrap. However, Glyphicons are not supported in Bootstrap 4. For inserting icons in Bootstrap 4, the user has to use free icon libraries such as Font Awesome. In order to use icons from Font Awesome, a user has to add the following to HTML page:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

Answer: b. .img-fluid

Explanation: .img-fluid can be used to make the images and other content in a web page automatically adjust to fit the size of the screen in Bootstrap 4. In addition to that, also set max-width: 100%; and height: auto;

Answer: c. Both (a) and (b) are correct.

Explanation: The Jumbotron in Bootstrap 4 can be used to create a container with the help of using class .jumbotron that can be used to increase the size of headings and also insert a large amount of margin that can be extensively used for the purpose of landing page control.

Answer: a. 20 px

Explanation: By default, the size of heading for <h5> in Bootstrap 4 is 20 px.

Answer: b. Carousel

Explanation: Carousel is the plugin that can be used to create an element like a slideshow that cycles through the elements. .carousel is the class that can be used to create a slideshow.

Answer: a. Fluid Layout

Explanation: In Bootstrap 4, a user can use the class .container-fluid in order to create fluid layouts that can use 100% of width of the viewport across all device sizes which are extra small, small, medium, large, and extra large.

The class used is .container-fluid that creates a width of 100% instead of different width for different viewport sizes. In addition to that, the layout will still remain responsive.

Answer: a. md

Explanation: In Bootstrap 4, the grid system contains four classes that are xs, sm, md, and lg. The xs class is used for mobile phone (extra small screens), the sm class is used for tablets (small screens), the md class is used for medium screens such as desktop and the lg class is used for large screens that are used for larger desktops.

Answer: a. Columns

Explanation: The contents in a web page can be placed within a column element in Bootstrap 4.

Answer: b. IDs are supposed to be only used once per page but Classes can be used multiple times per page, and one element can have more than one Class but should have only one ID

Explanation: The main difference between ID and class is that ID can be used only once in a web page but a class can be used multiple times. Moreover, an element can also have multiple classes but it can only have a single ID.

Answer: b. 2

Explanation: In Bootstrap 4, the container class is mainly used for the purpose of setting the margin in order to deal with the responsive behavior of the layout. It is used to create boxed content. There are mainly two types of container classes in Bootstrap, which are:

1. .container (fixed-width)
2. .container-fluid (full-width)

Answer: d. All of the given options are correct

Explanation: The contextual classes are responsible for changing the background color of a table rows and the individual cells. The classes that can be used are:

1. .active - It is responsible for applying the hover color to a particular row or cell.
2. .success - It is responsible for showing the positive or successful action.
3. .info - It is responsible for showing the informative part of a section.
4. .warning - It is responsible for emphasizing on the warning that needs some sort of attention
5. .danger - It is responsible for showing or highlighting a potentially negative action or any dangerous information.

Answer: a. True

Explanation: Yes, Badges can be used inside a button class.

The syntax for creating a badge inside a button in Bootstrap 4 is given below:

<button type="button" class="btn btn-primary">
   Messages <span class="badge badge-light">5</span>
  </button>

Answer: a. True

Explanation: Bootstrap is mainly used for the purpose of front - end development only. It provides various options for creating beautiful and efficient web pages.

Answer: a. Twitter Blueprint

Explanation: Bootstrap was initially release in 2011 and it was created by Mark Otto, and Jacob Thornton at Twitter as a framework that will encourage the consistency across internal tools. Initially, it was named " Twitter Blueprint ", but later the name was changed to Bootstrap.

Answer: b. Bootstrap 3

Explanation: The Bootstrap 3 uses the flat design. It resigns the components to use flat design, and a mobile first approach.

Answer: c. Both (a) and (b)

Explanation: The Flexible Box Module which is popularly known as flexbox, was designed as a one - dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

And Sass is basically a tool that gives access to a user to avoid some of shortcomings of CSS, it's a scripting language that gets interpreted to CSS.

Flexbox and Sass are supported in the newest version of Bootstrap which is Bootstrap 4.

Answer: b. Syntactically awesome Stylesheets

Explanation: Sass is the short form for Syntactically awesome Stylesheets. It is a style sheet language that was initially designed by Hampton Catlin and developed by Natalie Weizenbaum. It can be used as a scripting language which can easily interpret CSS.

Answer: b. .table-striped

Explanation: A user has to use .table-striped so as to add zebra- striping to any table row within the <tbody>. Adding the stripes to a tables enhances the look of it.

The syntax of a striped table is given below:

<table class="table table-striped">
    <thead>
      <tr>
        <th>Name of the user</th>
        <th>Roll Number</th>
        <th>Phone Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>James</td>
        <td>01</td>
        <td>12345</td>
      </tr>
      <tr>
        <td>May</td>
        <td>02</td>
        <td>12346</td>
      </tr>
      </tbody>
  </table>
 

Answer: d. All of the above

Explanation: Bootstrap 4 provides a panel that can have a bordered box with some padding around its content. In order to color the panel, a user has to use contextual classes which are given below:

1. .panel-default - it gives the default styling to the panel in a web page
2. .panel-primary - it informs the user, that the panel is important and gives it a color of blue.
3. .panel-success - it informs the user, that the panel has some successful data and gives it a color of green
4. .panel-info - it informs the user to look at the information closely and gives it a color of lighter shade of blue.
5. .panel-warning - it informs the user that the panel contains some warning signs and gives it a color of yellow.
6. .panel-danger - it informs the user that this panel has some potentially harmful information which may be dangerous and gives it a color of red.

Answer: d. All of the above

Explanation: Bootstrap has converted to mobile first since Bootstrap 3. By mobile first, it means that the 'mobile first' styles can be discover throughout the entire library instead of them in separate files. A user only needs to add the viewport meta tag to the <head> element so as to ensure proper rendering and touch zooming on mobile devices.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Here, a user has to insert the viewport meta tag to the element so as to make sure that proper rendering and touch zooming is enabled on mobile devices.

The width property can be used to control the width of the device. If it is kept in accordance to the width of the device, it will ensure that it is rendered across the different devices i.e., mobiles , desktops , tablets and so on properly.

In this, the initial-scale = 1.0 helps a user understand that when loaded, the web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.

Therefore, all the options are correct in this.

Answer: c. .btn-sm

Explanation: In order to create a button which is smaller in size, a user has to add .btn-sm. The syntax for the same is given below:

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

Answer: d. .btn-group-vertical

Explanation: In Bootstrap 4, .btn-group-vertical class is the class that is responsible for making a set of buttons appear vertically stacked instead of horizontally placed

Answer: c. .progress-striped

Explanation: In order to make an animated progress bar in Bootstrap, a user has to insert a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped. Next, inside the above <div>, add an empty <div> with a class of .progress-bar. Therefore, the correct option is (b) .active class.

Answer: c. Both (a) and (b) are correct.

Explanation: The Bootstrap media objects are very important in Bootstrap 4. The media objects can be defined as the object styles that can be used to create different types of components such as a blog comment, a tweet, and so on. However, the main objective of the media object is to make the code become shorter.

Answer: b. It can add the HTML into the tooltip. If false, jQuery's text method will be used to insert content into the dom.

Explanation: In data - html, the HTML can be added to the tooltip. However, it is false, jQuery's text method will be used to insert the content into the dom. Therefore, the correct option is (b).

Answer: d. Delays showing and hiding the tooltip in ms.

Explanation: In case of data - delay, it basically delays the showing and hiding the tooltip in ms , however, it does not apply to manual trigger type. If a number is supplied, delay is applied to both hide or show.

Answer: c. .nav, .nav-pills, .nav-stacked

Explanation: A user can easily stack the pills vertically using the class with the help of using .nav-stacked along with the classes: .nav, .nav-pills. Therefore, the correct option will be (c ).

Answer: a. .navbar-text

Explanation: In Bootstrap, the class .navbar-text can be used to insert a text to a .navbar. Therefore, the correct option will be (a).

Answer: a. .vertical

Explanation: The basic layout of a bootstrap form by default is vertical. However, a user can change the layout and convert it to inline or horizontal with the help of different classes such as .inline class and .horizontal class. Therefore, the correct option will be (a) .vertical.

Answer: d. All of the above

Explanation: In Bootstrap, the predefined grid classes such as .row and .col-xs-4 are easily available for the purpose of making a grid layout. Moreover, the columns can make gutters which means the gap between the column content. And grid columns are also made to specify the number of twelve available columns a user wish to span. Therefore, the correct option will be (d) all of the above.

Answer: c. Both (a) and (b) are correct.

Explanation: In Bootstrap, the form controls can have a block level help text which flows with the inputs. In addition to that, it can also add a full width block of content by using .help-block after the <input>. Therefore, the correct option will be ( c ) that both the given options are correct.

Answer: c. Both (a) and (b) are correct

Explanation: When a user is using a Tab Plugin, he/she can toggle the hidden content in it with the help of data attributes. Moreover, a user can also toggle the hidden content by using JavaScript. Therefore, the correct option is ( c ).

Answer: d. All of the above

Explanation: Bootstrap is a potent front-end framework used to create modern websites and web apps. It's open-source and free to use. Bootstrap also supports JavaScript extensions. Bootstrap is also responsive CSS that adjusts to Desktops, Tablets and Mobiles.

Moreover, it provides a clean and uniform solution for building an interface for developers.

It also contains functional built-in components which are easy to customize.

Answer: c. Both (a) and (b) are correct.

Explanation: In Bootstrap, a well can be defined as something like a bootstrap panel that has some round borders and padding around it. The main purpose of creating a well is to draw attention towards some content of the webpage in a website. The .well class can be used to create basic well. The .well class inserts a rounded border around the element with a gray background color and some padding. However, this can be changed with the help of the text color and padding using CSS.

In simple words, a well is a container in <div> that makes the content to appear sunken on the page.

To create a well, simply wrap the content that a user would like to appear in the well with a <div> containing the class of .well.