Google News
logo
Bootstrap-4 Interview Questions
Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap 4 is completely free to download and use!
Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been many alpha releases. And finally after that on 10th August 2017, Bootstrap released 

the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2 was released on October 19th, 2017. 
Easy to use : Anybody with just basic knowledge of HTML and CSS can start using Bootstrap 4

Responsive features : Bootstrap's responsive CSS adjusts to phones, tablets, and desktops

Mobile-first approach : In Bootstrap 4, mobile-first styles are part of the core framework

Browser compatibility : Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Safari, and Opera).
Bootstrap's media object component provides an easy way to align text and media objects when presenting them alongside each other. It allows you to quickly and easily float media to the left and/or right of a content block. 

Only two classes are required : The wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.
Bootstrap provides classes that can be used when working with the img element and examples for opting images into responsive behavior and add lightweight styles to them all classes.

i) Responsive images
ii) Thumbnail
iii) Aligning Images
iv) Image Shapes & Corners.
Responsive images automatically adjust to fit the size of the screen. Bootstrap are made responsive with .img-fluid class to the  tag.  The .img-fluid class applies max-width: 100%; and height : auto; are applied to the image so that it scales with the parent element.

<img src="image.jpg" class="img-fluid" alt="responsive Image">
The .img-thumbnail class shapes the image to a thumbnail (bordered): 
<img src="image.jpg" class="img-thumbnail" alt="thumbnill image" />
The Bootstrap 4 image alignments are mainly used two classes there are .float-left, .float-right .

<img src="image_1.jpg" class="rounded float-left" alt="bootstrap 4 image">
<img src="images_2.jpg" class="rounded float-right" alt="bootstrap 4 image">
You can use Bootstrap to render images with rounded corners or as a circle. This is achieved with the .rounded-* utility classes.

<img src="image_1.png" class="rounded" alt="rounded image">
<img src="image_2.png" class="rounded-circle" alt="rounded-circle image">
<img src="image_3.png" class="img-thumbnail" alt="img-thumbnil image">
<img src="image_4.png" class="rounded-top" alt="rounded-top image">
<img src="image_5.png" class="rounded-bottom" alt="rounded-bottom image">
<img src="image_6.png" class="rounded-0" alt="rounded-0 image">
The bootstrap 4 colors are mainly three :

Text Colors :  .text-primary, .text-success, etc,..
Link Colors :  .text-white and .text-muted
Background Colors :  .bg-primary, .bg-success, etc,..