Spacing between two columns in parent row

Question

I'm wanting to add some 10px spacing between two columns and anything I have tried has made the columns start a new row.

Here is what I need:

I would like for it to be 10px between the two columns but anything I have tried so far has not helped me much and it just kept pushing one col-xs-6 onto the other row.

Here is my code:

.row {
  margin-left: auto!important;
  margin-right: auto!important;
}

.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
  margin-bottom: 5px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  margin-top: 15px!important;
  margin-bottom: 5px!important;
}

.visible-xs {
  padding: 0px!important;
}

hr {
  margin-top: 10px!important;
  margin-bottom: 0px!important;
  margin-right: 15px!important;
  margin-left: 15px!important;
}

#Q3,
#Q4 {
  margin-top: 20px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  background-color: #F2F2F2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding: 5px;
}

#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F2F2;
  padding-top: 20px;
  font-weight: bold;
}

#appSpacing {
  margin-top: 10px!important;
  margin-bottom: 10px!important
}

.num {
  position: absolute;
  top: 5px;
  left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-12" id="CollabXS">
          <div>COLLABORATION</div>
        </div>
      </div>
      <div class="col-xs-6" id="YammerXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" /></a>
          <p>Yammer</p>
          <span class="num">5</span>
        </div>
      </div>
      <div class="col-xs-6" id="TeamsXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" /></a>
          <p>Teams</p>
          <span class="num">6</span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Don't columns have 15px of spacing between them by default (gutter? Feels like you're working against the framework here. https://getbootstrap.com/docs/3.3/customize/#grid-system `@grid-gutter-width: 30px` *"Padding between columns. Gets divided in half for the left and right."* — Tim Lewis, Jun 26 '18 at 19:03

score 0 · Answer 1 · edited Jun 26 '18 at 23:30

0

If all you want is a space between your columns why don't you try the bootstrap class justify-content-between?

edited Jun 26 '18 at 23:30

Chiramisu

4,687
7
47
77

answered Jun 26 '18 at 18:33

Jismon Thomas

783
1
6
22

The 'justify-content-between' classname is from Bootstrap 4, and is not available in Bootstrap 3. – Ezra Free Jun 26 '18 at 18:35
Thanks for the reply @EzraFree, Jismon like Ezra mentioned I'm using Bootstrap 3. – Jun 26 '18 at 18:40
Okay, my bad, I didn't notice that he is using Bootstrap 3, in that case you can still use "justify-content: space-between " if you can wrap your columns in a div – Jismon Thomas Jun 26 '18 at 18:42
Thanks for the input @Jismon, looks like the justify-content attribute doesn't work, I've tried adding another div and it just moves the content inside each separate divs. – Jun 26 '18 at 18:45

iStepashka · Answer 2 · 2018-06-26T19:08:03.530

Try using class col-md-offset-2. You can find suggested answers to your question here

Try the following:

 <div class="col-xs-6" style=padding-left:5px >
     <div class="col-xs-12" id="YammerXS">
    <div id="appSpacing">
      <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" /></a>
      <p>Yammer</p>
      <span class="num">5</span>
    </div>
    </div>
  </div>
  <div class="col-xs-6" style=padding-right:5px>
   <div class="col-xs-12" id="TeamsXS">
    <div id="appSpacing">
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx" target="_blank"><img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" /></a>
      <p>Teams</p>
      <span class="num">6</span>
    </div>
    </div>
  </div>

I knew about this, doesn't help much at all because it offsets a much bigger col than I'm needing. — , Jun 26 '18 at 18:49
Try to add sub div element and use padding. See my edited example — iStepashka, Jun 26 '18 at 19:09

score 0 · Answer 3 · answered Jun 26 '18 at 18:57

I simplified HTML and CSS to just show the two columns. Use border.

.col-xs-6 {
    }
    #YammerXS {
      border-right: 5px solid #ffffff;
      background-color: yellow;
    }
    #TeamsXS {
      border-left: 5px solid #ffffff;
      background-color: pink;
    }

<html>
      <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      </head>
      <body>
        <div class="row container">
          <div class="col-xs-6" id="YammerXS">
            <p>Yammer</p>
          </div>
          <div class="col-xs-6" id="TeamsXS">
            <p>Teams</p>
          </div>
        </div>
      </body>
    </html>

score 0 · Accepted Answer · answered Jun 26 '18 at 20:19

see if this helps you, i have added a parent div for your columns and added a margin right for the first item.

.row {
  margin-left: auto!important;
  margin-right: auto!important;
}

.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
  margin-bottom: 5px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  margin-top: 15px!important;
  margin-bottom: 5px!important;
}

.visible-xs {
  padding: 0px!important;
}

hr {
  margin-top: 10px!important;
  margin-bottom: 0px!important;
  margin-right: 15px!important;
  margin-left: 15px!important;
}

#Q3,
#Q4 {
  margin-top: 20px!important;
}

#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
  background-color: #F2F2F2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding: 5px;
}

#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F2F2;
  padding-top: 20px;
  font-weight: bold;
}

#appSpacing {
  margin-top: 10px!important;
  margin-bottom: 10px!important
}

.num {
  position: absolute;
  top: 5px;
  left: 10px;
}

.parent {
  display: flex;
  justify-content: space-between;
}
.child {
 background: #148342;
 }
.child:first-child {
  margin-right: 10px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-12" id="CollabXS">
          <div>COLLABORATION</div>
        </div>
      </div>
     <div class="parent">
      <div class="col-xs-6 child" id="YammerXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx" target="_blank"></a>
          <p>Yammer</p>
          <span class="num">5</span>
        </div>
      </div>
      <div class="col-xs-6 child" id="TeamsXS">
        <div id="appSpacing">
          <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx" target="_blank"></a>
          <p>Teams</p>
          <span class="num">6</span>
        </div>
      </div>
     </div>
    </div>
  </div>
</body>

</html>

Spacing between two columns in parent row

4 Answers4