30th Dec, 2019
The initial function of its addition to the web pages is to offer Bootstrap's options of size, layout, font, and colour to those web pages. After the addition, Bootstrap also offers fundamental style or design clarity for every HTML components, resulting in a consistent appearance for form elements, tables, and prose covering the web browser.
Below are few major features of Bootstrap
Q1. What is Twitter Bootstrap?
The Twitter Bootstrap in Github with the name of Twitter Blueprint on August 19th, 2011. Mainly used to create a mobile-first, responsive front-end in the web applications quickly. Bootstrap consists of components that have default styles to build your websites. If you have a good understanding of HTML and CSS, then it is easy to get started with Bootstrap.
Q2. What are advantages of Bootstrap?
Some of the advantages of using Bootstrap are,
Q3. List types of layout in Bootstrap?
Bootstrap has two types of layout available.
They are the fluid and fixed layout. You can choose one of either of these containers to build your responsive website.
The fixed-layout has a specific pixel width value. It changes its width value using the help of the media queries. The fixed layout also resizes in chunks at several widths.
The fluid-layout takes 100% width and continuously resizes as you change the width of your window. It leaves no empty space on the sides.
Q4. What is Jumbotron in Bootstrap?
Jumbotron in Bootstrap is a light-weight flexible component. It can optionally extend the entire viewport to show some marketing message on your website. It is displayed as a gray box with rounded corners with an enlarged message at the center. Any valid HTML components can be put inside this Jumbotron to display a message.
Q5. What is card in Bootstrap?
The card is a component in Bootstrap that is used to provide a flexible and extensible container to display some content. It has options to display an image, headers, footers, backgrounds, and other wide variety of content. They offer good control and customization support.
//example <div class="card"> <div class="card-body"> This is some text within a card body. </div> </div>
Q6. Enlist few alternative of Bootstrap?
Some of the popular alternatives to the Bootstrap are,
Q7. What are Bootstrap alerts?
The alerts in Bootstrap is used to style a predefined message to the user. The messages act as feedback to the user’s actions. Alerts are created with .alert class.
.They have contextual classes such as .alert-success, .alert-info, .alert-warning, and .alert-danger.
//example <div class="alert alert-success"> Some success message. </div> <div class="alert alert-info"> Some information message. </div> <div class="alert alert-warning"> Some warning message. </div> <div class="alert alert-danger"> Some danger message. </div>
Q8. What is Bootstrap Navbar?
The navigation bar or Navbar in Bootstrap is located at the top of the page that includes the support for branding, navigation, and collapse plugin. The default navigation bar is created with the class
<nav class=”navbar navbar-default”>.
The sub-components of the navigation bar are .navbar-brand, .navbar-nav, .navbar-toggler, .form-inline, .navbar-text, and .collapse.navbar-collapse. Each component has its own functions.
Q9. What are badges in Bootstrap?
Badges in Bootstrap is used to highlight new or unread items in your web application. It is similar to the labels but has more rounded corners. You can use the class "badge" to create a badge.
//example <a href = "#">Messages <span class = "badge"></span></a>
Q10. What is Bootstrap Well?
The well in bootstrap is a container that is used to appear the contents in it as a sunken or an inset effect. It adds a rounded border to the element with a gray background color and padding. The well can be created using the class .well with the <div> element.
//example <div class="well">It is a well element.</div>
Q11. List major components of Bootstrap?
Some of the major components in the Bootstrap are,
Q12. What is a progress bar in bootstrap?
The progress bar in Bootstrap is used to provide visual feedback to the user on the progress of the action or process on the website. The default progress bar can be used by the .progress class in aelement.
You can also create a progress bar with labels, colors, striped colors, animation, and stacked bars.
//example <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div>
Q13. What are labels in Bootstrap?
Labels in Bootstrap is used to provide additional information like tips, offering counts to the user. The default label can be used with .label class. The appearance of the label can be modified by using the sub-components such as label-primary, label-success, label-info, label-warning, and label-danger.
//example <h1>Example of the default label class <span class = "label label-default">Label</span></h1>
Q14. What is column offset in bootstrap?
This offset property is used to push the column over to the next cell to provide more space to the elements present in that column. To use column offset, use the .col-md-offset class.
//example <div class="row"> <div class="col-md-4">first column</div> <div class="col-md-4 offset-md-4">second column</div> </div>
Q15. Enlist different form controls supported by Bootstrap?
The supported form controls in the bootstrap are input, text area, button, checkbox, radio, and select.