'Why is the gutter padding not displaying in one of my Bootstrap webpage content block and how do I fix it?

I have just started learning Bootstrap 5. I made a very simple webpage with basic blocks using the row/column guidelines on Bootstrap. One of these columns that I made is not displaying the gutter padding. The other columns are displaying the gutter padding to the left and right, but not the content1 column that consists of the two "posts". I am attaching my HTML and CSS code here.

Here is the webpage that I made in Bootstrap 5: Click Here to View

And I am attaching my CSS code here:

.header1 {
    background:#ededed;
    border-bottom:1px solid #ddd;
}
.content1 {
    padding:40px 0;
}
.post {
    background:#ffe6fa;
    margin-bottom:30px;
}
.sidebar1 {
    padding:40px 0;
}
#widget1, #widget2, #widget3 {
    background:rgb(233, 250, 205);
    padding:30px;
    margin-bottom:30px;
}
.footer1 {
    background:#000;
    color:#fff;
}

Can you please help me understand what did I do wrong in my code? Why is the Bootstrap gutter padding not displaying for the column with class "content1"?

Thank you so much.

htmlcssbootstrap-4


Solution 1:[1]

There is a way for Bootstrap to do all the work and you get to shrink down your CSS file too.

blahblahblah{
 etc.etc.etc
 etc.etc.etc
 etc.etc.etc
}

^ done for one tiny UX result eventually adds up to a large file that needs to be loaded by each visitor. You could do it all by adding 4 characters only to your HTML.

You are adding a lot of CSS when Bootstrap will take care of it for you. In the same way that you can add rows and columns to your HTML to make a cool layout where all the CSS is pre-written, you can also add margins and padding to your HTML and the CSS is all automatic too. You've already been doing this by adding gutters (if you were also following the GetBootstrap info for those rather than adding your own).

In your thing above, the two items that require a gutter on their right hand side could just have a little margin on their right hand side, or the column they are housed in could have a little right-side padding.

So, padding in Bootstrap, use any number between 0 and 5. Everything below also applies to Margins, just swap the p to an m.

<div class="p-0">
Padding - None

<p class="p-5">
Padding - Maximum (but you can add CSS)

<a class="pt-0">
Padding Top - None

<h1 class="pb-5">
Padding Bottom - Maximum

In Bootstrap we don't use left and right for some things, we use Start and End.

<nav class="ps-5">
Padding Start (the left side of whatever is being padded)

<footer class="pe-2">
Padding End (the right side of whatever is being padded)

^ That last one can be added to the parent div of your two boxes. Adding pe-2 to your HTML is better than brain-aching over custom CSS? As promised, 4 characters only ;)

Couple of variations...

<img class="px-0">
Padding left and right

<button class="py-0">
Padding top and bottom

The main point is, especially with the layout of the page. Let Bootstrap do the work, adding more and more layout CSS often results in a negative.

Solution 2:[2]

The thing is you are adding padding for content1 as padding: 40px 0; which makes the padding zero on both left and right of the content1. If you want to have some padding,

.content1{
   padding: 40px 10px;
}

will do the trick. And if you want to add some padding to .post classes as well, you can use,

.post{
   padding: 30px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nipuna Upeksha

Related Questions