CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
bboulahdid
bboulahdid

Reputation: 339

Bootstrap 3 - 2 inputs in the same line but not in the same width as one input

The title might sound tricky but here is my problem : inputs for "Nom" and "Prénom" are in the same line but they are not in the same width line the first input.

Inputs for "Nom" and "Prénom" are, as i want, in the same line but they are not in the same width line the first input.

Here is my code :

<form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label"><abbr title="Code National de l'Étudiant">CNE</abbr> <span class="important">*</span></label>
            <div class="col-sm-10">
              <input type="text" name="cne" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
            <div class="col-sm-10">
                <div class="col-sm-6">
                    <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
                </div>
                <div class="col-sm-6">
                    <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="prenom" class="col-sm-2 control-label">Prénom <span class="important">*</span></label>
            <div class="col-sm-10">
                <div class="col-sm-6">
                    <input type="text" name="prenomFr" class="form-control" id="prenom">
                </div>
                <div class="col-sm-6">
                    <input type="text" name="prenomAr" class="form-control" id="prenom" placeholder="العربية" dir="rtl">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="dateNaissance" class="col-sm-2 control-label">Date de naissance <span class="important">*</span></label>
            <div class="col-sm-10">
                <input type="date" name="dateNaissance" class="form-control" id="dateNaissance">
            </div>
        </div>
    </form>

Upvotes: 1

Views: 1732

Answers (3)

Raad
Raad

Reputation: 4648

Actually you don't need to have a row for each set of col- elements, as the .form-group class is the same as .row with the addition of a bottom-margin - you could argue that semantically it's better... Meh.

The main issue is you are nesting 2 x 6-column-span elements in a 10-column-span element, and you have already used up 2 columns with the label, so it's all wrong.

As you probably know, Bootstrap uses a 12 column grid system, so if you create an element and apply col-sm-2 then you have 10 columns left. If you have 2 elements, each spanning 6 columns, it's not going to work.

What you can do is lose the extra <div class="col-sm-10"> and change your 2 inputs to span 5 cols each:

<div class="form-group">
    <label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
    <div class="col-sm-5">
        <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
    </div>
    <div class="col-sm-5">
      <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
    </div>
</div>

That will give you what you really want - each input field in 2 column areas aligned to the edges of the fields in single column areas.

Note: I use form-group here because the bottom margin pads out the rows and looks nice IMO.

Upvotes: 0

Vlad Pintea
Vlad Pintea

Reputation: 853

Be careful how you nest your elements. You must have a new row before nesting col-*s. 

 <div class="col-sm-10 row">
  <div class="row">
    <div class="col-sm-6">
        <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
    </div>
    <div class="col-sm-6">
        <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
    </div>
  </div>
</div>

Every container and col-* has a 15px padding left and right. The row element has margin left and right set to -15px to compensate. so container > row > col > row >col etc

Upvotes: 1

Steve
Steve

Reputation: 9571

You need to add a row class on your <div class="col-sm-10"> divs. This sets a negative padding which means the position padding set by columns allows it to line up.

Look at http://getbootstrap.com/css/#grid-nesting for info.

<div class="form-group">
    <label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
    <div class="col-sm-10 row">
        <div class="col-sm-6">
            <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
        </div>
        <div class="col-sm-6">
            <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
        </div>
    </div>
</div>

Upvotes: 1

Related Questions