67. Bootstrap 4 Nesting rows and columns - Full stack web development Tutorial Course

Показать описание

In this FullStackWebDevelopment tutorial course series video, we are going to build the second section of our #bootstrap website. For this, we will be nesting #rows and #columns.

- First, create a div with the class name sectionDark.
And then grab the class section dark, copy and paste it in the CSS so that we can add background colour and respective padding.
We can write the code as follows:
.sectionDark{
background-color:#cccccc;
padding:2rem;
}
- Then create the first row following the first column.
In this section, we are working with offsets. We have actually got a total column width of 3. Also the column width of 1 which occurs to be in the left side which will also contain the image. And then we add an offset of 2, what it says is an empty space of 2 columns wide to the left.
So to add some content in the left column we will add an image along with the class.

- Next, create another column class.
Inside this column add some text content. For the text content, we need to add 2 rows one stacked upon the other. So inside the first of the two rows create a column class and we would want this column to expand the entire width of the column of 6. Then add a paragraph tag inside the column, grab some dummy text from the browser, copy and then paste it inside the paragraph tag.

- Then create the second row and create columns within a row without any offset. So we create a div class of column small 12 and then a column medium of 9 and add a paragraph tag.
Also outside of the column create the second div class of column of 12 for small viewports and then on the medium of 3.Inside this column we will put the class image-fluid so that the image can scale appropriately as our viewport changes.

- Create one more row at the bottom and then add a button. so create a row and then a div class column small of 12.
For the button, we will add a wrapper class that means we will be putting a wrapper element around the button so we can add margin and space to push it away from other elements. For this, we have to create our own class and then add the button inside it. Also to style the button we will create our own button class.

- Then grab the wrapper class in the CSS file and add a margin-top of 20 pixels.
We can write the code as follows:
.coolStuffWrapper {
margin-top:20px;
}
- Then grab the coolStuffBtn copy and paste it in css by its element then add background colour, respective font colour, display of block to move the element and margin:auto.
We can write the code as follows:
Background-color:red;
color:#ffffff;
Display:block;
margin:auto;
}

----------------------------

Week 2: Day 5
Section 9: Bootstrap 4: Skate or Die Website
Tutorial 67: Bootstrap 4 Nesting rows and columns

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

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

----------------------------

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

----------------------------

Affiliate Space

Brand: Hostinger International