CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Venomoustoad
Venomoustoad

Reputation: 1213

How do I get a combination of inline labels and standard labels in a form using bootstrap?

I am making a form with bootstrap. I understand I would need to use the form-horizontal class if I want to use horizontal labels for the entire form. However, in my case, I need a few inputs to have horizontal labels, while others have normal labels without the inline labels (with a break)

The basic code I use is the bootstrap code using the control groups as below.

<form>
    <div class="control-group">
       <label class="control-label">Label_name1</label>
       <div class="controls">
          <input type="text" >
       </div>
    </div>
    <div class="control-group">
       <label class="control-label">Label_name2</label>
       <div class="controls">
          <input type="text" >
       </div>
    </div>
     <div class="control-group">
       <label class="control-label">Label_name3</label>
       <div class="controls">
          <input type="text" >
       </div>
    </div>
 </form>

What I want

   Label_Name1 :  [___________] (Input box inline)
   Label_Name2 : [__________________________] (Input box inline)
   Label_Name3:
   [___________________________] (Input box on next line)

if I use the form-horizontal class

<form class = "form-horizontal">

What i get

   Label_Name1 :  [___________] (input box inline)
   Label_Name2 : [__________________________] (Input box inline)
   Label_Name3: [___________________________] (Input box inline again - not what i want)

If I do not use the form horizontal class, what i get is this

   Label_Name1 :  
   [___________] (Input box on next line - not correct)
   Label_Name2 : 
   [__________________________] (Input box on next line- not correct)
   Label_Name3: 
   [___________________________] (Input box on next line)

Is there anyway I can customize the control group to set the horizontal / inline labels to each control group instead of using the form-horizontal class?

Upvotes: 2

Views: 127

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362870

You could try something like this. Also, control-group isn't a Bootstrap class.

<form class="form-horizontal">
      <div class="form-group">
         <label class="col-sm-2">Label 1</label>
         <div class="col-sm-10">
            <input type="text" class="form-control">
         </div>
      </div>
      <div class="form-group">
         <label class="col-sm-2">Label 2</label>
         <div class="col-sm-10">
            <input type="text" class="form-control">
         </div>
      </div>
      <div class="form-group">
          <label class="col-sm-2">Label 3</label>
          <div class="col-sm-12"><input type="text" class="form-control"></div>
      </div>
   </form>

Demo: http://bootply.com/108060

Upvotes: 2

Related Questions