CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Engo
Engo

Reputation: 969

How to set more space between blocks Bootstrap?

My homepage consists of multiple blocks(top part/mid part/bottom part). I've created a row for each block. I want to add some space between my blocks in Bootstrap. Can I simply give my rows id's and add some margin, or is this wrong?

Structure of my code:

<div class="container" id="ho_main_content">
    <div class="row">
        <div class="col-md-12 text-center"></div>
    </div>
    <div class="row">
        <div class="col-md-12"></div>
    </div>
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Upvotes: 1

Views: 1737

Answers (3)

Janine Calcetas
Janine Calcetas

Reputation: 11

In bootstrap 5 I add g-0 to g-5 class with row class to add space around each col. EX.

<div class="row g-3">
 <div class="col">...</div>
 <div class="col">...</div>
</div>

https://getbootstrap.com/docs/5.0/layout/gutters/

Upvotes: 1

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

  
/*you can create your own custom css for use here is some example*/
.border {
  border: 1px solid red; /* just to make sure space between blocks*/
}

.margin-top {
  margin-top: 5px; 
}
   
.nopad{
 padding:0 ; 
}
div[class*='spacer-'] { display: block; }
.spacer-mini { height: 20px; }
.spacer-small { height: 40px; }
.spacer-medium { height: 60px; }
.spacer-big { height: 100px; }
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main_content">
  <div class="row border margin-top">
<div class="col-md-12 text-center">text1</div>
  </div>
  <div class="row border  margin-top">
<div class="col-md-12">text2</div>
  </div>

<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top -->

  <div class="row">
<div class="col-md-6 col-xs-6 border">part1</div>
<div class="col-md-6 col-xs-6 border">part2</div>
  </div>
</div>
</body>

Upvotes: 0

vladdobra
vladdobra

Reputation: 144

This "answer" of mine should really be a comment; however, I don't have enough rep.

For an answer, yes, give the divs with the row class another class, probably something like this, spacing the top and bottom of each 10px:

.part { margin: 10px 0; }

An important thing to think about when using frameworks like bootstrap is that it isn't the end of the world if you modify the components or spacing or something. Some things won't look like you want them to; just give them extra classes, or if you are desperate, use the !important flag. It was built on the same technology, after all.

Upvotes: 1

Related Questions