CODEWITHSUNDEEP
formscsstwitter-bootstraplaravel-blade
user3270211
user3270211

Reputation: 933

Put label next to input form

I am working with bootstrap and laravel (blade) as backend and cant upload my code in jdfiddle to show. But the problem is that the label is far from the input box, is a way to put it next to it in the center ?

enter image description here 

<div class="row">
         {{ Form::open(array('url' => 'bassengweb/insertHV', 'method' => 'POST')) }}
                <div class="col-md-6">
                    <div class="form-group">


    <label class="col-md-6 col-lg-6 control-label">Dato: </label>
                    <div class="col-md-6 col-lg-6">
                      {{ Form::text('Date', $date, array('class' => 'form-control')) }}
                    </div>
                </div>
            </div>

    <div class="col-md-6 text-left-imp"> 


                <div class="form-group">
                    <label class="col-md-6 col-lg-6 control-label">Tid: </label>
                    <div class="col-md-6 col-lg-6">
                      {{ Form::text('Time', $time, array('class' => 'form-control')) }}
                    </div>
                </div>


    </div>
    </div>

Upvotes: 3

Views: 5611

Answers (1)

Sean Adkinson
Sean Adkinson

Reputation: 8615

Your labels have class col-md-6, which is going to make them pretty wide. I'd try any of the following:

  • Use a smaller label column, maybe col-md-3
  • Use text-align: right inside the labels to push them next to inputs
  • Try using form-inline or form-horizontal and see if it gives you what you want

This is the markup used in the API sample for the form-horizontal class (note how the elements are arranged):

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Upvotes: 6

Related Questions