Alignment using bootstrap

Question

I use AngularJs, Bootstrap, NodeWebkit.

I'm trying to create my pages' header like this : enter image description here So here is my code :

<div class="row">
<img class="col-md-offset-1 col-xs-1 col-sm-1 col-md-1 col-lg-1 img-rounded image-module-pd " src="{{titreImage}}"></img>
<h3 class="col-xs-5 col-sm-5 col-md-5 col-lg-5 text-left titre-module">{{ titreLocalization | translate }}</h3>

<div class="input-group text-right">
    <span id="basic-addon1" class="input-group-addon glyphicon glyphicon-search" ></span>
    <input class="form-control"  ng-model="recherche_texte" Name="recherche_input" placeholder="{{ 'RECHERCHE_TITRE' | translate }}" type="text" style="width:250px;"/>
</div>

</div>

This is what I get : enter image description here

There are a few issues : My glyphicon is not fully vertically alignated with the input, why ? I've just pasted the example from bootstrap's documentation. My input + glyphicon are not on the right My input + glyphicon are not vertically alignated with my title.

I hope my images are big enough so you can understand my problems.

Thank you

Try [Bootlint-ing](https://github.com/twbs/bootlint) your page next time. It would have caught several of these errors. — cvrebert, Jan 11 '15 at 19:01
Thank you, but how can I use it with nodewekit ? I can't really load my pages without nodewekbit because I use angularJs which needs a server (or something else) to load directives. — user2088807, Jan 13 '15 at 12:00

score 3 · Accepted Answer · edited May 23 '17 at 10:30

There are minor mistakes against important Bootstrap 3 rules:

First:

Content should be placed within columns, and only columns may be immediate children of rows

Second:

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Third:

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>

So, place your image, title and search components into separate div with col classes and use offset where needed, but be sure that your column count doesn't add up over 12, otherwise these contents will wrap onto the next line.

This following is a working example, available at Bootply to play around with the code:

<div class="row">
  <div class="col-xs-offset-1 col-xs-1">
    <img class="img-rounded image-module-pd" src="http://placehold.it/100x60">
  </div>
  <div class="col-xs-5">
    <h3 class="text-left titre-module">Title</h3>
  </div>
  <div class="col-xs-offset-2 col-xs-2">
    <div class="input-group text-right">
      <span id="basic-addon1" class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input class="form-control" ng-model="recherche_texte" name="recherche_input" placeholder="Search" type="text">
    </div>
  </div>
</div>

Note that you may omit col-sm, col-md and col-lg classes if a col-xs class is present and you don't need other breakpoints on larger screen widths:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

To solve your problem to vertically align the search component read on this other posts that cover this issue:

vertical-align with bootstrap 3

How to center align vertically the container in bootstrap

Thank you, I'm trying now to align vertically. Also, do I need to add
if I have only one div on a page ? — user2088807, Jan 11 '15 at 15:03
No. Use any number of columns within a row. The sum of columns depends on your needs. Bootstrap has a default 12 column grid layout. Any number over 12 will wrap to the next line. If you want to fill one row with one div then use `col-xs-12`. — timo.rieber, Jan 11 '15 at 15:10

Alignment using bootstrap

1 Answers1