Bootstrap Practice Test - Practice Test Geeks

Content must be contained within the Bootstrap

A) Columns

B) Rows

C) Containers

Correct! Wrong!

Explanation:
Only columns may be immediate children of rows, and content should be placed within them.

Bootstrap is built around reusable ___________ that include basic, sub, and design variant styles.

A) Code snippets

B) Classes

C) Components

D) Widgets

Correct! Wrong!

Explanation:
Bootstrap is bundled with tens of components that can be reused to provide good user experience and user interactions in a web page like navigation bars, pop-ups, dropdowns, icons, buttons, pre-designed forms and also sizing options for different DOM elements.

How many columns are there in the Bootstrap grid system?

A) 12

B) 6

C) 3

D) 15

Correct! Wrong!

Explanation:
Due to the fact that the Bootstrap grid structure is built on 12 columns, preserve the columns in a single line (i.e. side by side), the grid's total The number of columns in a single row should not exceed 12.

In Bootstrap, what class name would you give a full-width container?

A) .container-width

B) .container-full

C) .container-fw

D) .container-fluid

Correct! Wrong!

Explanation:
Using the bootstrap "container-fluid" class, we can create a full-width container. Containers are the most fundamental layout element in Bootstrap, and they're essential if you want to use our default grid system.

What differentiates the.container-fluid class from the.container class?

A) The .container-fluid class clears all floats and starts a new row

B) The .container-fluid class removes all horizontal padding so it touches the left and right edge of the browser window

C) The .container-fluid class makes the container expand the full width of the browser

Correct! Wrong!

Explanation:
For all screen sizes, such as mobile, tablet, and desktop, the.container class has a set width, but the.container-fluid class has a full width.

What was the original name of Bootstrap?

A) Twitter Bootstrap

B) Blueprint Bootstrap Twitter

C) Twitter Blueprint

D) Bootstrap Blueprint

Correct! Wrong!

Explanation:
Mark Otto and Jacob Thornton created Bootstrap, formerly known as Twitter Blueprint, at Twitter as a framework to ensure consistency across internal tools. Before Bootstrap, interface development was done with a variety of libraries, which resulted in inconsistencies and a significant maintenance overhead.

Which class is used to make a big box that attracts extra attention?

A) .bigbox

B) .jumbotron

C) .container

Correct! Wrong!

Explanation:
A Bootstrap jumbotron is a large box used to draw attention to specific material or information. It appears in the form of a grey box with rounded corners. It also has the ability to enlarge the font sizes of the text within it.

To make a badge, what class is used?

A) .badge

B) .label

C) .tag

D) .flag

Correct! Wrong!

Explanation:
Badges are generated by combining the.badge Bootstrap span class with a contextual class (for example,.badge-success) on a span> element to provide more information to content.

Who developed the Bootstrap?

A) Mark Otto & Jacob Thornton

B) Jacob Otto & Eric Suzanne

C) Mark Otto & Anna Otto

D) Jacob Thornton & Anna Otto

Correct! Wrong!

Explanation:
Mark Otto and Jacob Thornton created Bootstrap, formerly known as Twitter Blueprint, at Twitter as a framework to ensure consistency across internal tools.

To make a basic pagination, which class is used?

A) .navigation

B) .pages

C) .pagination

D) .page

Correct! Wrong!

Explanation:
To create a basic pagination, add the.pagination class to an ul> element.

A panel's heading is added by which class?

A) .panel-heading

B) .panel-footer

C) .panel-head

D) .panel-header

Correct! Wrong!

Explanation:
The.panel-header class adds a heading to the panel: The.panel-footer class adds a footer to the panel: Wrap a div> with the class.panel-group around multiple panels to group them together. The.panel-group class clears each panel's bottom-margin:

CSS stands for

A) Creative Style Sheets

B) Control Style Sheets

C) Computer Style Sheets

D) Cascading Style Sheets

Correct! Wrong!

Explanation:
CSS (Cascading Style Sheets) is a style sheet language for describing the appearance of a document authored in a markup language like HTML. Along with HTML and JavaScript, CSS is a key component of the World Wide Web.

To make a basic list group, which class is used?

A) .group-list

B) .list-group

C) .grouped-list

Correct! Wrong!

Explanation:
An unordered list with list elements is the most basic list group. A basic list group is created using the classes ".list-group" in the ul> element and ".list-group-item" in the li>element. In addition, badges can be added to a list group.

What are the most significant difference between ID and Class?

A) ID's 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

B) Classes are for use with spans and ID's are for use with DIVs

C) ID's are better than Classes

D) Classes should be used only once per page, but ID's can be used as many times as you like on one page

Correct! Wrong!

Explanation:
The main distinction is that "id" is unique within a page and can only be used to one element, whereas "class" can be applied to numerous components.

A modal window is created using which plugin?

A) Window

B) Popup

C) Modal

D) Dialog Box

Correct! Wrong!

Explanation:
Is a simple plugin that allows you to make modal windows. With a few lines of code, it may generate alert or confirmation messages. Simple Modal is not a lightbox, despite the fact that it has the ability to hide elements of its layout.

In Bootstrap, what layout is used to provide 100 percent width?

A) Fluid layout

B) Fixed layout

C) Both A and B

D) None of the above

Correct! Wrong!

Explanation:
The fixed-layout has a specific width, but the fluid layout uses the entire width of the application. Page layout is mostly determined by the header, footer, sidebar, main text, and navigational bar.

To make a tooltip, which plugin is used?

A) Dialog Box

B) Tooltip

C) Popup

D) Modal

Correct! Wrong!

Explanation:
The tooltip, also known as an infotip or a hint, is a common graphical user interface element in which a text box displays information about a screen element or component when the user hovers over it, such as a description of a button's function, the meaning of an abbreviation, or the exact absolute time stamp over a relative time ("... ago"). As long as the user hovers over the element, the tooltip will be displayed.

To cycle through elements, such as a slideshow, which plugin is used?

A) Scrollspy

B) Slideshow

C) Carousel

D) Orbit

Correct! Wrong!

Explanation:
The carousel plugin is a component that allows you to cycle through elements, such as images. slideshow. If you wish to add plugin functionality one by one, you can do so must utilize the carouseljs file or all at once (using "bootstrap.js" or "bootstrap.min.js").

Which of the following statements concerning the popover Plugin's data-trigger Data attribute is correct?

A) Defines how the popover is triggered

B) Sets the default title value if the title attribute isn't present

C) Delays showing and hiding the popover in ms

D) Defines default content value if data-content attribute isn't present

Correct! Wrong!

Explanation
The correct answer
Defines how the popover is triggered

Which of the following statements about Bootstrap cross-browser compatibility is correct?

A) Normalize.css is a modern, HTML5-ready alternative to CSS resets

B) Normalize.css is a CSS file that provides cross-browser compatibility in the default styling of HTML elements

C) Bootstrap use Normalize to establish cross browser compatibility

D) All of the above

Correct! Wrong!

Explanation
The correct answer
All of the above

Which of the following bootstrap image styles adds border-radius:500px to make the full picture round?

A) img-circle

B) img-thumbnail

C) img-rounded

D) None of the above

Correct! Wrong!

Explanation:
Bootstrap class img-circle. Bootstrap is a CSS framework for web development. To style your image and make it totally round, use the img-circle Bootstrap class.

What are the two primary methods for incorporating Bootstrap into your website? Select two option

Please select 2 correct answers

A) Adding the CSS styles in a style tag in the head of the document

B) Linking to the CSS/JS files on GitHub

C) Linking to a precompiled CSS/JS versions via CDN or locally

D) Linking to a customized build using the Sass source files

Correct! Wrong!

Explanation
The correct answer
Linking to a customized build using the Sass source files
Linking to a precompiled CSS/JS versions via CDN or locally

True/False: Flexbox is a custom named component built by Bootstrap, not a basic CSS feature.

A) False

B) True

Correct! Wrong!

Explanation:
The flexbox is useful for responsive web design because it provides space between containers and items based on the device screen size. The flexbox adjusts the element's height, breadth, and size to fit the user's needs at the desired location.

Which class indicates the presence of a dropdown menu?

A) select

B) dropdown

C) dropdown-list

D) None

Correct! Wrong!

Explanation:
A dropdown menu is indicated by the.dropdown class.

The global default line-height in Bootstrap

A) 1.428

B) 1.8

C) 1.128

D) 1.228

Correct! Wrong!

Explanation:
The default font size in Bootstrap is 14px, with a line height of 1.428. This applies to the body> tag as well as all paragraphs. p> (paragraphs) also get a bottom margin of half their calculated line-height (10px by default).