Twitter Bootstrap Question posted in

Adding space between 2 columns in Bootstrap 4-Twitter bootstrap

I have two pictures in a row with img-fluid class.
They are both of the same width and are taking all the space in the div.

I’m struggling to add space between them.

I have tried 3 things:

  1. I’ve added padding-right to the left one and padding-left to the
    right one, but it looks bad on a mobile phone when they are each on
    a new line (as you would expect).

  2. I’ve tried to add a third div between them with just a padding, but it ruins the structure.

  3. And of course, I’ve tried to give them col-sm-5 instead of col-sm-6, but in that case the gap between them is too big.

How can I add 5-10 pixels between them without ruining other things?

.wrapper {
    max-width:500px;
    height:500px;
    margin:0 auto;
    background-color:#f0f0f0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
  <div class="row justify-content-between">
    <div class="col-sm-6 p-0">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    <div class="col-sm-6 p-0">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
  </div>
</div>
</div>
Tags:

2

Answers


  1. 0 
    .wrapper {
    max-width:500px;
    height:500px;
    margin:0 auto;
    background-color:#f0f0f0;
}
    <!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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    

</head>
<body>

<div class="wrapper">
<div class="container-fluid">

<div class="row justify-content-between">
  
    <div class="col-sm-6 pt-2">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    
    <div class="col-sm-6 pt-2">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
   
  </div>
  
  <div class="row justify-content-between">
  
    <div class="col-sm-6 pt-2">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    
    <div class="col-sm-6 pt-2">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
   
  </div>

       <div class="row justify-content-between">
  
    <div class="col-sm-6 pt-2">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    
    <div class="col-sm-6 pt-2">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
    </div>
    
    
</div>
</div>
</html>

    Here, space between two images and adding multiple same image’s below to show it’s working. I don’t know how much space you want between them.

    css code

    <style>
  .wrapper {
    max-width:500px;
    height:500px;
    margin:0 auto;
    background-color:#f0f0f0;
   }
</style>

    HTML Code

    <div class="wrapper">
    <div class="container-fluid">

    <div class="row justify-content-between">

       <div class="col-sm-6 pt-2">
          <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
        </div>

        <div class="col-sm-6 pt-2">
       <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
        </div>

      </div>

      <div class="row justify-content-between">

        <div class="col-sm-6 pt-2">
          <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
        </div>

        <div class="col-sm-6 pt-2">
       <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
        </div>

      </div>

           <div class="row justify-content-between">

        <div class="col-sm-6 pt-2">
          <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
        </div>

        <div class="col-sm-6 pt-2">
       <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
        </div>
        </div>
    </div>
    </div>
    Login or Signup to reply.
  2. 0

    Use the responsive padding classes (ie: pr-sm-2)…

    <div class="wrapper">
    <div class="container-fluid px-0">
        <div class="row no-gutters justify-content-between">
            <div class="col-sm-6 pr-sm-2">
                <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
            </div>
            <div class="col-sm-6">
                <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
            </div>
        </div>
    </div>
</div>

    https://codeply.com/p/9FeTihZoPs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search