1) What is Bootstrap 4?
Bootstrap 4 is the current version of Bootstrap. Bootstrap 4 is basically an HTML, JavaScript and CSS framework. Bootstrap 4 is popular among the developer across the globe for building mobile-first and also responsive sites with a Bootstrap content distribution network and the template starter page. Bootstrap 4 is free to download and use.
2) Bootstrap 4 released on which date?
The alpha 1 version of the Bootstrap 4 got released on 19th of August 2015, and the beta 1 version of the Bootstrap 4 got released on 10th of August 2017
3) Can you list the difference between Bootstrap 3 and Bootstrap 4?
| S.no | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| 1. | It has 4 grid system | It has 5 grid system |
| 2. | The offset class of Bootstrap 3 is (col-md-offset-4). | The offset class of Bootstrap 4 is (offset-md-4). |
| 3. | In Bootstrap 3, this (.img-responsive) class is used for responsive image. | In Bootstrap 4, this (.img-fluid) class is used for responsive image. |
| 4. | In Bootstrap 3 (.input-lg) and (.input-sm) is used to increase or decrease the input size. | In Bootstrap 4 (.form-control-lg) and (.form-control-sm) is used to increase or decrease the input size. |
4) Why we use Bootstrap 4?
- Easy to use: Anyone who has the fundamental knowledge of the HTML and the CSS can start working on Bootstrap
- Responsive feature: The responsive CSS of Bootstrap adjusts to phones, tablets, and even desktops
- Mobile-first approach: In this version, the mobile-first styles are the part of the core framework
- Browser compatibility: Bootstrap 4 is compatible with the leading browsers like Google Chrome, Internet Explorer 10+, Mozilla Firefox, Edge, Safari & Opera.
5) Can you explain the Basic structure of a Bootstrap 4 Grid?
The Bootstrap 4 grid System is developed with flexbox has a limit of 12 columns across the entire page. If a developer does not want to use the 12 columns individually then, it can be merged to create a full column. The grid system in Bootstrap 4 is responsive and also depending upon the screen size the columns are re-arranged dynamically. The UI developer has to make sure that the sum must be 12 or less than 12.
The bootstrap 4 grid system has the following five classes:-
- col- (for extra small devices whose screen width less than 576px)
- col-sm- (for small devices whose screen width equal to or greater than 576px)
- col-md- (for medium devices whose screen width equal to or greater than 768px)
- col-lg- (for large devices whose screen width equal to or greater than 992px)
- col-xl- (for xlarge devices whose screen width equal to or greater than 1200px)
The above classes can be united to create a flexible and dynamic layout.
6) What new in Bootstrap 4? Explain
Bootstrap 4 is a significant change from it’s earlier versions. Following are some of the necessary changes:
- CSS is moved from LESS model to SASS model.
- Print pages: Support for printing pages ensures that the size of the printed page is good enough on larger screens. This is done using flex and new print styles.
- By adding uniform code for custom and regular checkbox and radio buttons, form validations are now much more accessible.
- For JS behaviors “data” attribute is used and for group toggling “btn-group-toggle” is added newly.
- Table classes are now named “dark-*” instead of “inverse.”
7) List the different image shapes & Corners used in Bootstrap 4?
Bootstrap has the following image shapes and Corners:-
- Rounded Corners
- circle
- Thumbnail
- Aligning Images
- Responsive Images
- Centered Image
Rounded Corners:-
The class .rounded add round corners to the image .
syntax:-
<img alt=” imageName” class=”rounded” src=”imageName.jpg”>
Circle :-
The class .rounded-circle turns the shape of the image to a circle.
Syntax:-
<img alt=” imageName ” class=”rounded-circle” src=” imageName.jpg”>
Thumbnail:-
The class .img-thumbnail turns the shape of the image to a thumbnail, i.e. bordered image.
Syntax:-
<img alt=”imageName” class=”img-thumbnail” src=” imageName.jpg”>
Aligning Images:-
An image is aligned to the left with the class .float-left and an image is aligned to the right with the class .float-right
Syntax:-
<img class=”float-left” src=” imageName.jpg”>
<img class=”float-right” src=” imageName.jpg”>
Centered Image:-
The classes .mx-auto (margin:auto) & .d-block (display:block) align the image at the center.
Syntax:-
<img class=”mx-auto d-block” src=” imageName.jpg”>
Responsive Images:-
The responsive images adjust themselves dynamically according to the size of the screen. The class .img-fluid is added to the <img> tag to create a responsive images. The class .img-fluid gives max-width: 100%; & height: auto; to the image that has to be responsive.
Syntax:-
<img alt=“ imageName” class=”img-fluid” src=” imageName .jpg”>
9) Explain Bootstrap 4 Positions.
Bootstrap 4 Positions rapidly configure the position of the elements. The positioning classes are .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky.
There are three positions in Bootstrap 4:-
- Fixed top:- Here the position of an element is at the top of the viewport from an edge to an edge. Syntax:-<div class=”fixed-top”>…</div>
- Fixed bottom:- Here the position of an element is at the bottom of the viewport from an edge to an edge. Syntax:-<div class=”fixed-bottom”>…</div>
- Sticky Top:-Here the position of an element is at the top of the viewport from an edge to an edge but only after the user scrolls down below the position of the element. Syntax:- <div class=”sticky-top”>…</div>
10) How many colors in Bootstrap 4? Explain
There are two types of Bootstrap 4 colors:-
- Text Colours
- Background Colours
Text Colours:-
Bootstrap 4 has few contextual classes which can be used to give “meaning through colours”. The classes for the text colours are: .text-muted, .text-success, .text-info, .text-primary, .text-danger, .text-secondary, .text-dark, .text-white, .text-body (default body colour/often black) and .text-light. Contextual classes can be used on links, and this will add a darker hover color. 50% opacity for black or white text can be added with the classes .text-black-50 or .text-white-50.
Background Colours:-
The background colours classes are .bg-primary, .bg-warning, .bg-info, .bg-success, .bg-danger, .bg-secondary, .bg-dark & .bg-light. Since the background colours do not set the colour of the text therefore the developer have to use them with the clas .text-*
11) Explain media objects in bootstrap 4?
Bootstrap 4 gives an effortless way to align the images and the videos along with the content. We can use media objects to show tweets, comments on blogs and many more things. To have a media object the container needs to have a class named .media and for the content of the media, a child container needs to be created with a class attached .media-body
To make sure sufficient spacing is given used padding and other tags as needed. We can have more than one media objects nested with each other. You can add another .media class in a container with a class of .media-body. Alignment to the right can be done by adding an image after .media-body container. For Bottom, top or middle alignment we can provide utilities of flex such as align-self*
12) What Are Bootstrap 4 Forms?
The Bootstrap 4 forms are textual form controls like <input>, <text area>, and <select> elements with class .form-control have a width of 100% by default.
Horizontal form: Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.
Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls. For <legend> elements, you can use .col-form-legend to make them appear similar to regular <label> elements.
Form and Label Sizing: To Use .col-form-label-sm or .col-form-label-lg to your <label>s to correctly follow the size of .form-control-lg and .form-control-sm.
And so many forms is there Inline Forms, Help text & Disabled Forms, Readonly plain text, etc….
13) What Is Bootstrap 4 Navs?
Bootstraps included navigation components list into “tabs” and navigation “pills”. To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.
14) What Is A Bootstrap 4 Card?
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
A bootstrap card, includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
