Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout

col-md-2 last column is not on the same line


I've placed 6 glyphicons on one line and want to make them into links (to be made into modals eventually).

This is my code for putting them on the line before turning them into links:

   <div class="row">
   <div class="col-md-2"><i class="fa fa-windows fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-linux fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-apple fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-android fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-bluetooth fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><i class="fa fa-wifi fa-3x" class="center-block"></i></div>
</div>

This worked great.

Then I started making them into links (not finished yet):

    <div class="row">
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-windows fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-linux fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-apple fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-android fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-bluetooth fa-3x" class="center-block"></i></div>
   <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-wifi fa-3x" class="center-block"></i></div>
</div>

Suddenly the last WiFi glyphicon is not exactly on the same line as the other but it has dropped down slightly.

How can I get it to be on the same level with the others?


Solution

  • You can do that in closing your a tag.

        <div class="row">
       <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-windows fa-3x" class="center-block"></i></a></div>
       <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-linux fa-3x" class="center-block"></i></a></div>
       <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-apple fa-3x" class="center-block"></i></a></div>
       <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-android fa-3x" class="center-block"></i></a></div>
       <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-bluetooth fa-3x" class="center-block"></i></a></div>
         <div class="col-md-2"><a class="btn btn-link" href="#"><i class="fa fa-wifi fa-3x" class="center-block"></i></a></div>
    </div>