CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Juan Manuel Amoros
Juan Manuel Amoros

Reputation: 357

Equally spaced columns in Twitter Bootstrap

I am developing a web page with Bootstrap. This is my first time using this framework, I am facing one problem about the grid system and I do not know how to solve it.

I have 3 columns and I want the same margin between them.

<div class="container">
        <div class="row" id="interlineado-25">
            <div class="col-xs-12 col-sm-3 well">
                <img src="src/imagenes/disenyo.png" class="centrar img-responsive section-img">
                <h1 class="centrar-texto"><small>Diseño</small></h1>
            </div>
            <div class="col-xs-12 col-sm-3 col-sm-offset-1 well section-img">
                <img src="src/imagenes/programo.png" class="centrar img-responsive section-img">
                <h1 class="centrar-texto"><small>Programación</small></h1>
            </div>
            <div class="col-xs-12 col-sm-3 col-sm-offset-1 well">
                <img src="src/imagenes/android-apps.png" class="centrar img-responsive section-img">
                <h1 class="centrar-texto"><small>Android Apps</small></h1>
            </div>
        </div>
</div>

The problem using this code is that there is a column left on the right side, I can't fill it and the three images are not centered.

Upvotes: 1

Views: 292

Answers (1)

George
George

Reputation: 36784

There isn't a nice way of doing what you are trying with native bootstrap functionality.

You can go ahead and use the id of your row and :first-child to get the extra margin you need for your first column:

@media (min-width: 768px){
  #interlineado-25 > div:first-child{
    margin-left: 4.166666666%;
  }
}

Bootply

Or, you can put your wells within your columns and have the columns take up 4/12 each:

<div class="container">
  <div class="row" id="interlineado-25">
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <img src="src/imagenes/disenyo.png" class="centrar img-responsive section-img">
        <h1 class="centrar-texto"><small>Diseño</small></h1>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <img src="src/imagenes/programo.png" class="centrar img-responsive section-img">
        <h1 class="centrar-texto"><small>Programación</small></h1>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <img src="src/imagenes/android-apps.png" class="centrar img-responsive section-img">
        <h1 class="centrar-texto"><small>Android Apps</small></h1>
      </div>
    </div>
  </div>
</div>

Bootply

Note: The ID attribute needs to be unique, documents wide. id="section-img" should probably be a class.

Upvotes: 3

Related Questions