58. Understanding Bootstrap 4 Classes – Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial course series video, we are going to learn about #classes in #bootstrap4 #css

A container class is used to create boxed content.
There are two container classes in bootstrap:
– container
– container-fluid

Example for the container class:
.container {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
}

This is a container class having all the styling properties
@media (min-width: 576px){
.container{
Padding-right: 15px;
Padding-left: 15px;
}
}

This is the media query that is prebuilt with a particular size and has all the padding added to it. There’s also other prebuilt media queries of different sizes and padding added to it.

– container-fluid: It provides a full-width container which spans the entire width of the viewport.

Example for the container-fluid class:
.container-fluid {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
}

And the following media query is:
@media (min-width: 1200px) {
.container-fluid {
padding-right: 15px;
padding-left: 15px;
}
}

The difference between the bootstrap container and bootstrap container-fluid classes are:

.container has maximum width pixel value ,whereas .container-fluid is max-width 100%.
.container-fluid continuously resizes as you change the width of your browser or window by any amount, whereas .container resizes in chunks at several certain widths, controlled by media queries.
Use .container-fluid when you want your page to shapeshift with every little difference in its viewport size, whereas use .container when you want your page to shapeshift to only 5 kinds of sizes, which are also known as “breakpoints”.

We will learn about other classes in detail in further videos. Also to know more about the classes you can search bootstrap 4 in your browsers, go to official documentation and scroll down towards classes.

—————————-

Week 2: Day 3
Section 7: Introduction to Bootstrap 4
Tutorial 58: Understanding Bootstrap 4 Classes

—————————-
Do subscribe and hit Bell Icon
—————————-

Follow us in social media handles for opportunities and code related support.

Instagram: https://www.instagram.com/wb.web/
Facebook: https://www.facebook.com/wbweb/
Twitter: https://twitter.com/wbweb_in/
LinkedIn: https://www.linkedin.com/company/wbweb/

—————————-

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

For more information, please write back to us at hi@wbweb.co.in or call us at IND: 7077568998

After completing the course, write to biswabijaya@wbweb.co.in for internship or freelancing opportunities.

For consultation or partnership, related queries drop a mail to hi@wbweb.co.in.

—————————-

Affiliate Space

Brand: Hostinger International
https://www.hostg.xyz/SH13I (International)
https://www.hostg.xyz/SH2H (For India)