Gain insights into Bootstrap 4 layout design, explore grid systems, responsive columns, and components. Learn about CSS preprocessors and modular layouts with Angular to create professional designs.

Bootstrap.tar.gz

Angular

Org_Angular

Koala

Angular-separate-css

This course provides detailed guidance of the web layout design process using the Bootstrap 4 framework.

You’ll begin with an in-depth overview of layout design using Bootstrap 4 framework. Then, you’ll learn to build layouts using the Bootstrap grid, utilizing the Bootstrap rows and responsive columns. Next, you’ll use Bootstrap components like breadcrumb, carousel, card, and jumbotron as well as copy features from one layout and use them in another. Then, you’ll customize a layout with the help of CSS preprocessors using the Koala app. After this, you’ll modularize the layout building process using Angular. You’ll then create Airbnb and Shopify layouts using the knowledge and experience gained in the course. 

By the end of this course, you’ll become an expert in creating web layouts using Bootstrap 4 and know about best practices in layout designing.

Bootstrap 4 Layouts in Depth

What is the maximum number of columns we can add in a row?

What is the maximum number of columns we can add in a row?

Which combination of columns in a grid is correct?

Which combination of columns in a grid is correct?

the space between the border and its content

**(Fill in the blank.)** In Bootstrap 4, the padding is ________.

(Fill in the blank.) In Bootstrap 4, the padding is ________.

**(Fill in the blank.)** In Bootstrap 4, the margin is ________.

(Fill in the blank.) In Bootstrap 4, the margin is ________.

How many default margin and padding classes are there in Bootstrap 4?

How many default margin and padding classes are there in Bootstrap 4?

They add a top `margin` with an intensity of 4 and the right `padding` with an intensity of 5.

They add a top `margin` with an intensity of 5 and `padding` on all sides with an intensity of 4.

They add a top `margin` with an intensity of 5 and the left `padding` with an intensity of 4.

They add a top `margin` with an intensity of 5 and the right `padding` with an intensity of 4.

Explain how the `margin` and `padding` utility classes work in the following HTML element:
```HTML
<div class="container border border-warning mt-5 pr-4">
 Hello World
</div>
```

Explain how the <code>margin</code> and <code>padding</code> utility classes work in the following HTML element:
<pre><code class="language-HTML">&lt;div class=&quot;container border border-warning mt-5 pr-4&quot;&gt;
 Hello World
&lt;/div&gt;
</code></pre>

✨Getting Started

Introduction to Bootstrap

Grid in Bootstrap 4

Components of Bootstrap 4

Official Bootstrap Example

Cloning CSS Theme

Typography-Focused Layout

Modularize Bootstrap Layouts

Optimizing Official Bootstrap's Incline Theme

Airbnb Clone Layout in Bootstrap 4

Shopify Clone Layout in Bootstrap 4

Conclusion

Appendix

Quick Quiz