CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Daarwin
Daarwin

Reputation: 3024

aligning text box label with the text box

I'm using bootstrap. I want the text labels for the inputs to be aligned left of the text boxes edge, not above in the center as they are now.

Is this something that is done with bootstrap?

EDIT: Sorry the code snippet did not show my problem properly so i redid it in jsFiddle. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-center col-xs-12  ">
  <div class="row">
  </div>
  <div class="row ">
    <div class="col-xs-6 ">
      <label for="companyInput">LABEL</label>
      <br />
      <input id="companyInput" type="text">
    </div>
    <div class="col-xs-6 ">
      LABEL
      <br />
      <input id="cardInput" type="text" />
    </div>
  </div>
</div>

Upvotes: 2

Views: 65

Answers (3)

romellem
romellem

Reputation: 6503

EDIT:

I updated your fiddle, here - https://jsfiddle.net/Lfmxt3kv/1/

If you have to have text-center on the parent container, then you'll need a wrapper div around your label and input element. Here are the changes I made to the fiddle:

<div class="text-center col-xs-12">
  <div class="row ">
    <div class="col-xs-6 ">
      <!-- .input-wrapper needs to be wrapped around both the label and input element -->
      <div class="input-wrapper">
        <label for="companyInput">LABEL</label>
        <input id="companyInput" type="text">
      </div>
    </div>
    <div class="col-xs-6 ">
      <div class="input-wrapper">
        <label for="cardInput">LABEL</label>
        <input id="cardInput" type="text" />
      </div>
    </div>
  </div>
</div>

.input-wrapper {
  display: inline-block;
  text-align: left;
}

.input-wrapper label {
  display: block;
}

Just adding text-left looks like it works.

<div class="col-sm-6 text-left">
  LABEL ONE
  <br />
  <input id="companyInput" type="text" placeholder="Företag... (1-100)">
</div>

Upvotes: 3

dippas
dippas

Reputation: 60593

you are looking for Bootstrap forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

For what you want, you need to display:inline-block the .form-group and add class text-left to align left because .container has text-center

Snippet

.form-group {
  display: inline-block
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-center container">
  <div class="row">
    <div class="col-xs-12">
      <form class="form">
        <div class="form-group text-left">
          <label for="companyInput">Company</label>
          <input class="form-control" id="companyInput" type="text" placeholder="Företag... (1-100)">
        </div>
        <div class="form-group text-left">
          <label for="cardInput">Card</label>
          <input class="form-control" id="cardInput" type="text" placeholder="Kort... (1-100)" />
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 1

Phil
Phil

Reputation: 49

for a quick fix you could add a class to the div..

<div class="textalign col-span-6">

then in css just do 

.textalign { text-align: left; }

Upvotes: 0

Related Questions