How to add space between column

Question

I use Bootstrap to create 3 columns. The columns stack on each other after I add the border. I tried to change padding and margin but it didn't work. How do I add space between columns ?

HTML

<h3>Simple Text Box Color</h3>
<div class="row">
<div class="col-md-4 black-border">
<h3>Sample Text Box</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 black-border">
<h3>Sample Text Box</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 black-border">
<h3>Sample Text Box</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

CSS

.black-border{border: 1px solid #000;}

Stack Column image

Ravi Kumar CH · Answer 1 · 2021-08-22T00:29:45.370

You need to mention bootstrap version. As of bootstrap v5, you can use gutters for the effect you are looking to apply to your columns.

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .black-border {
      border: 1px solid #000;
    }
  </style>
</head>
<div class="container px-4">
  <div class="row g-2">
    <div class="col">
      <div class="p-3 border bg-light">
        <h3>Sample Text Box</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">
        <h3>Sample Text Box</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">
        <h3>Sample Text Box</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</div>

</html>

score 0 · Answer 2 · answered Aug 21 '21 at 01:54

0

Try using margin i tested it on your code and it worked.

 <style>

.black-border{ padding-left:30px;
margin-top: 30px;
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
border: 1px solid #000;}
</style>

answered Aug 21 '21 at 01:54

agunimonx1

67
7

Doing so will result in spacing in responsive mobile view, for which the CSS would have to be written again separately. – Ravi Kumar CH Aug 21 '21 at 02:22
That's true but it works for the sample he provided at the moment and he never stated it's for a mobile app. – agunimonx1 Aug 21 '21 at 02:26

score -1 · Answer 3 · answered Aug 21 '21 at 04:17

<!DOCTYPE html> <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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title> </head> <body>
<div class="container">
    <div class="row">
        <div class="col-sm-3 border m-2">
            <h3 class="text-center">First Box</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, similique.</p>
        </div>
        <div class="col-sm-3 border m-2">
            <h3 class="text-center">Second Box</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt, eos!</p>
        </div>
        <div class="col-sm-3 border m-2">
            <h3 class="text-center">Third Box</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, laborum.</p>
        </div>
    </div>
</div> </body> </html>

Your answer would help if you 1) explained your code, 2) made the code into a Snippet so that we can see the result. — chrwahl, Aug 21 '21 at 06:27

How to add space between column

3 Answers3