Aligning elements with bootstrap

user_5812876 0
Viewed 37

I would like the markup below to display the "Format Example" string aligned with the textual labels of the following input fields as shown in the screenshot below. It's currently acting like it's been right-justified. Since I'm using AngularJS with Bootstrap I don't want to use things like static width, so how should I modify this to be more dynamic?

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">

  <div style="float:left">
    <legend>Copy</legend>
    <div style="float:right">
      <u>Format Example</u>
    </div>
    <br/>
    <br/>
    <div>
      <input type="text" /> Format Unknown
    </div>
    <br/>
    <div>
      <input type="text" /> X.X.X
    </div>
    <br/>
    <div>
      <input type="text" /> YYYYMMDD-HHMM
    </div>
    <br/>
    <div>
      <input type="text" /> X.X-SNAPSHOT
    </div>
    <br/>
    <div>
      <input type="text" /> YYYY-MM-DD HH:MM:SS
    </div>
  </div>
</fieldset>

enter image description here

twitter-bootstrap angularjs css html
1 Answers

You'll just need to grid it out using columns and rows. This is a basic example and you'll need to add md, sm and xs sizing as needed. Preview the snippet in full screen.

Also, avoid using breaks to space out your rows. Do that with css instead.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">

  <div style="float:left">
    <legend>Copy</legend>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-6"><u>Format Example</u></div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">Format Unknown</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">X.X.X</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">YYYYMMDD-HHMM</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">X.X-SNAPSHOT</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">YYYY-MM-DD HH:MM:SS</div>
    </div>
  </div>
</fieldset>

user_2333370
Related