R3y R3y - 3 months ago 14
CSS Question

Is it possible to make col-md-3 closer or center to each other?

Is it possible to make col-md-3 closer to each other?
Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Center</title>
<style>

body {
margin-top: 50px;
}

</style>

</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
</div>
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
</div>
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
</div>
</div>
</div>
</body>
</html>


Is not at the center does anyone know how to fix it?

Your help much appreciated!

Answer

Yes, but for this you need to override styling for Bootstrap's columns. By default Bootstrap's columns are styled as float: left. We need to replace float with display: inline-block then we can make them in center easily with text-align: center.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.center-align .row {
  letter-spacing: -4px;
  text-align: center;
  font-size: 0;
}
.center-align [class*='col-md'] {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  text-align: left;
  font-size: 16px;
  float: none;
}
<div class="container center-align">
  <div class="row">
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
    </div>
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
    </div>
    <div class="col-md-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend imperdiet elit vel pretium. Donec auctor urna ut dui imperdiet ullamcorper.</p>
    </div>
  </div>
</div>

Note: Don't forget to remove extra space that comes by making an element inline-block.