Bootstrap Layout Sidebar padding. How to....?

HTML-CSS
1

Hi There!
I am new with Boostrap and I cannot figure out how to add space between the main and the sidebar(bg -info) block. Have a look at the image and code below:

Screenshot 2023-05-19 at 15.36.39
Screenshot 2023-05-19 at 15.36.392636×1126 122 KB 

 <div class="container-fluid">
        <div class="row p-2">

            <!-- TOP BLOCK -->
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        <p>Total score</p>
                        <h1>41</h1>
                        <p>16% This month</p>
                    </div>
                    <div class="col-md-3">
                        <p>Total score</p>
                        <h1>41</h1>
                        <p>16% This month</p>
                    </div>
                    <div class="col-md-3">
                        <p>Total score</p>
                        <h1>41</h1>
                        <p>16% This month</p>
                    </div>
                    <div class="col-md-3">
                        <p>Total score</p>
                        <h1>41</h1>
                        <p>16% This month</p>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="row p-2">
        
            <!-- MAIN BLOCK -->
            <div class="col-md-9 ">
                <button class="btn btn-primary">MAX</button>
            </div>

            <!-- SIDEBAR BLOCK -->
            <div class="col-md-3 bg-info">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="bg-danger text-center">
                            <h1>10</h1>
                            <p>Total Point</p>
                        </div>
                        <div class="bg-danger text-center">
                            <h1>10</h1>
                            <p>Total Point</p>
                        </div>
                        <div class="bg-danger text-center">
                            <h1>10</h1>
                            <p>Total Point</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Thank you
P.

2 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css"> 
  <title>Document</title>
</head>
<body>
  <div class="container-fluid bg-info">
    <div class="row p-2">

        <!-- TOP BLOCK -->
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    <p>Total score</p>
                    <h1>41</h1>
                    <p>16% This month</p>
                </div>
                <div class="col-md-3">
                    <p>Total score</p>
                    <h1>41</h1>
                    <p>16% This month</p>
                </div>
                <div class="col-md-3">
                    <p>Total score</p>
                    <h1>41</h1>
                    <p>16% This month</p>
                </div>
                <div class="col-md-3">
                    <p>Total score</p>
                    <h1>41</h1>
                    <p>16% This month</p>
                </div>
                
            </div>
        </div>
    </div>
  </div>

      <div class="col-md-12">
        <div class="row d-flex justify-content-between">

        <!-- MAIN BLOCK -->
        <div class="col-md-8 bg-dark ">
            <button class="btn btn-primary" >MAX</button>
        </div>
        <!-- SIDEBAR BLOCK -->
        <div class="col-md-3 bg-info">
            <div class="row align-items-center">
                <div class="col">
                    <div class="bg-danger text-center">
                        <h1>10</h1>
                        <p>Total Point</p>
                    </div>
                    <div class="bg-danger text-center">
                        <h1>10</h1>
                        <p>Total Point</p>
                    </div>
                    <div class="bg-danger text-center">
                        <h1>10</h1>
                        <p>Total Point</p>
                    </div>
                </div>
            </div>
        </div>
   </div>

</div>
  


  <script src="js/bootstrap.bundle.js"></script>
</body>
</html>
type or paste code here
3

Can be many ways for adding space am new to bootstrap me self try to seperate top from main and sidebar can make container fluid or new div add container than row and used col-md-8 from col-md-9 for extra space to change and type
d-flex than add space between things written and can also be ok if want use Gap depends how much space you want for you website after row can also add space if want used code and made own div col-md-12 for main and sidebar can also use container fluid again if want hope can help thank you take care gn gm fren

4

It really depends on exactly what you are going for.

1 Like
5

I tried gutter but It doesn’t work. No matter if i copy and paste the code taken from the official guide, it’s simply not working. I didn’t get why… Have you got this problem?

6

Are you adding it to the containing row? Also, it doesn’t look like it can go higher than 5 which isn’t a lot.

The page has some different examples, there are also spacing utility classes and the flexbox classes. As I said, it really depends on the exact result you are trying to achieve.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.