Javatpoint Logo
Javatpoint Logo

Bootstrap 4 - Multiple Choice Questions

1) Which of the following statements is/are correct about Bootstrap 4?

  1. It provides a free front - end framework
  2. It is a completely open - source product
  3. It gives the ability to create responsive designs
  4. All of the above

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.


2) Who is/are the developers of Bootstrap?

  1. Mark Otto and Jacob Thornton
  2. Tim Berners - Lee
  3. Håkon Wium Lie
  4. None of the above

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.


3) Which of the following contextual class is used for the purpose of showing warning?

  1. .active
  2. .danger
  3. .warning
  4. None of the above

Answer: b. .danger

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


4) Which of the following classes can be used to make image with rounded corners in Bootstrap 4?

  1. .img-rounded
  2. .rounded
  3. Both (a) and (b)
  4. None of the above

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.


5) What is the font - size of <h3> in Bootstrap 4 by default?

  1. 19 px
  2. 28 px
  3. 20 px
  4. None of the above

Answer: b. 28 px

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


6) What does the following meta tag do?

<meta name="viewport" content="width=device-width, initial-scale=1">
  1. Tells the browser to look for media queries in the CSS file
  2. Makes the web page responsive automatically
  3. Prevents browsers from scaling desktop websites on mobile
  4. None of the above options are correct

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.


7) Why is the Glyphicons used in Bootstrap 4?

  1. Slideshow
  2. Graphic images
  3. Animations
  4. For the purpose of providing different icons

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">


8) Which of the following class can be used to make the images and other content in a web page automatically adjusts to fit the size of the screen?

  1. .img-rounded
  2. .img-fluid
  3. .img-circle
  4. None of the above

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;


9) Which of the following statements is true about Jumbotron in Bootstrap 4?

  1. The Jumbotron in Bootstrap 4 can be used to increase the size of headings and also insert a large amount of margin for the purpose of landing page control.
  2. In order to create a container with the help of using class .jumbotron.
  3. Both (a) and (b) are correct
  4. None of the above options is correct

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.


10) Which of the following is the correct heading size for <h5> in Bootstrap 4?

  1. 20 px
  2. 16 px
  3. 12 px
  4. None of the above

Answer: a. 20 px

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


11) Which of the following plugins can be used to cycle through the elements like a slideshow?

  1. Slideshow
  2. Carousel
  3. Scrollspy
  4. None of the above

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.


12) Which of the following layout can be used to provide 100% width in Bootstrap 4?

  1. Fluid Layout
  2. Fixed Layout
  3. Both (a) and (b) are correct
  4. None of the above options is correct

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.


13) Which among the following grid classes can be used for desktop?

  1. md
  2. sm
  3. xs
  4. None of the above

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.


14) In Bootstrap 4, the contents can be placed within which of the following elements?

  1. Columns
  2. Containers
  3. Rows
  4. None of the above

Answer: a. Columns

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


15) Which of the following is the main difference between an ID and a class?

  1. Classes are for use with spans and IDs are for use with DIVs
  2. 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
  3. IDs are better than Classes
  4. None of the above

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.


16) How many types of container classes are there in Bootstrap 4?

  1. 1
  2. 2
  3. 3
  4. None of the above

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)

17) Which of the following classes amongst these options is/are contextual?

  1. .warning
  2. .info
  3. .danger
  4. All of the given options are correct

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.

18) Can badges be used inside a button class?

  1. True
  2. False
  3. None of the above

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>

19) Is Bootstrap mainly used for the purpose of front - end development?

  1. True
  2. False
  3. None of the above

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.


20) Which of the following name was given to Bootstrap originally?

  1. Twitter Blueprint
  2. Twitter Bootstrap
  3. Twitter Blueprint Bootstrap
  4. None of the above

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.


21) Which amongst the following version of Bootstrap uses the flat design?

  1. Bootstrap
  2. Bootstrap 3
  3. Bootstrap 4
  4. None of the above

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.


22) Which of the following options is/are supported in Bootstrap 4?

  1. Sass
  2. Flexbox
  3. Both (a) and (b)
  4. None of the above

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.


23) Which of the following is the correct full form of Sass in Bootstrap 4?

  1. Syntactically awesome Spreadsheets
  2. Syntactically awesome Stylesheets
  3. Scripting awesome Stylesheets
  4. None of the above

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.


24) Which of the following class styles a table with strips on rows?

  1. .table
  2. .table-striped
  3. .table-hovered
  4. None of the above

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>
 

25) Which of the following contextual classes are used to color the panels?

  1. .panel-primary
  2. .panel-success
  3. .panel-info
  4. All of the above

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.

26) Which of the following is correct about Bootstrap Mobile First Strategy?

  1. 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.
  2. 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.
  3. 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.
  4. All of the above.

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.


27) Which of the following bootstrap styles of buttons can be used to make the size of the button small?

  1. btn-lg
  2. .btn-sm
  3. .btn-xs
  4. .btn-block

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>

28) Which of the following bootstrap style makes a set of buttons appear vertically stacked instead of horizontally placed?

  1. .btn-group
  2. .btn-toolbar
  3. .btn-group-lg
  4. .btn-group-vertical

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


29) Which of the following bootstrap styles can be used to create an Animated progress bar?

  1. .progress-active
  2. .active
  3. .progress-striped.
  4. None of the above.

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.


30) Which of the following is correct about bootstrap media objects?

  1. The media objects are abstract object styles which can be used for creating various types of components such as blog comments, Tweets, and so on. The feature is left - aligned or right - aligned image alongside the textual content.
  2. The main objective of the media object is to make the code for developing these blocks of information shorter.
  3. Both (a) and (b) are correct
  4. None of the above.

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.


31) Which of the following is correct about data - html Data attribute of Tooltip Plugin?

  1. It can be used to apply a CSS fade transition to the tooltip.
  2. It can add the HTML into the tooltip. If false, jQuery's text method will be used to insert content into the dom.
  3. It can specify the position the tooltip (i.e., top | bottom | left | right | auto).
  4. It can delegate to the specified targets.

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


32) Which of the following is correct about data - delay Data attribute of Tooltip Plugin?

  1. Sets the default title value if the title attribute isn't present.
  2. Defines how the tooltip is triggered.
  3. Defines default content value if data-content attribute isn't present
  4. Delays showing and hiding the tooltip in ms.

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.


33) Which of the following bootstrap styles are used to create a vertical pills navigation?

  1. .nav, .nav-tabs
  2. .nav, .nav-pills
  3. .nav, .nav-pills, .nav-stacked
  4. .nav, .nav-tabs, .nav-justified

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


34) Which of the following bootstrap style is used to add text to .navbar?

  1. .navbar-text
  2. .text
  3. .form-text
  4. None of the above.

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


35) Which of the following is the default layout of a bootstrap form?

  1. .vertical
  2. .inline
  3. .horizontal
  4. None of the above.

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.


36) Which of the following is correct about Bootstrap Grid System?

  1. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
  2. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
  3. Grid columns are created by specifying the number of twelve available columns a user wish to span. For example, three equal columns would use three .col-xs-4.
  4. All of the above.

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.


37) Which of the following is true about bootstrap help text?

  1. Bootstrap form controls have a block level help text that flows with the inputs
  2. To add a full width block of content, use the .help-block after the <input>
  3. Both (a) and (b) are correct.
  4. None 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.


38) Which of the following is correct about Tab Plugin?

  1. A user can toggle the Tab plugin's hidden content via data attributes.
  2. A user can toggle the Tab plugin's hidden content via javascript.
  3. Both (a) and (b) are correct
  4. None of the above 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 ).


39) Which of the following is correct about Bootstrap?

  1. Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
  2. Provides a clean and uniform solution for building an interface for developers.
  3. It contains beautiful and functional built-in components which are easy to customize.
  4. All of the above.

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.


40) Which of the following is correct about bootstrap wells?

  1. A well is a container in <div> that causes the content to appear sunken or an inset effect on the page.
  2. To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well.
  3. Both (a) and (b) are correct.
  4. None of the above.

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.


Next TopicBootstrap 4




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA