CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Vidal
Vidal

Reputation: 195

How to add space between two divs in a Bootstrap column layout?

I want to do this style in an archive .html

I want to be able to write inside white text area.

enter image description here

I'm starting with this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
</head>


<body>

<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>            
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      adios
    </div>
  </div>
</div>

</body>
</html>

Produce:

enter image description here

So, how can I get this?(separation between the row)

enter image description here

Upvotes: 3

Views: 9605

Answers (3)

Franklin Pious
Franklin Pious

Reputation: 3848

I have added the code according to the latest bootstrap v4. There are slight changes in the syntax while giving offset. And also the breakpoints have changed. xs in bootstrap v3 is equal to sm in bootstrap 4, md equal to lg and likewise.Hope it will be helpful.

Refer for more : https://getbootstrap.com/docs/4.0/layout/grid/

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

</head>


<body>

<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>            
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-sm-3 offset-sm-3" style="background-color:pink;">
      adios
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 1

Omar Yafer
Omar Yafer

Reputation: 853

Actually bootstrap does have a "gutter space" between columns. What you need is an element inside your col-div-* for this gutter to be visible. You could also use an offset as others have suggested, but you have to think about what you really want to to accomplish.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
</head>


<body>

<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>            
  <div class="row">
    <div class="col-xs-9" >
      <div style="background-color:yellow; padding: 10px;">hola</div>
    </div>
    <div class="col-xs-3">
      <div style="background-color:pink;">adios</div>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272816

Simply consider offset like below. You have a total of 9 columns of the grid used (6 + 3) so you can add an offset up to 3 to have a total of 12.

(i replaced sm with xs to see the result in the reduced snippet)

.row {
 margin-bottom:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-xs-3 col-xs-offset-3" style="background-color:pink;">
      adios
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-xs-3 col-xs-offset-2" style="background-color:pink;">
      adios
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-xs-3 col-xs-offset-1" style="background-color:pink;">
      adios
    </div>
  </div>
</div>

Upvotes: 5

Related Questions