CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2088807
user2088807

Reputation: 1408

Alignment using bootstrap

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

Upvotes: 1

Views: 141

Answers (1)

timo.rieber
timo.rieber

Reputation: 3867

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

Upvotes: 3

Related Questions