CODEWITHSUNDEEP
twitter-bootstrap-3oocss
Evanss
Evanss

Reputation: 23213

What is the Twitter Bootstrap convention for adding a new style to form labels?

I want to create a new style for forms in my Twitter Bootstrap site and I want to keep with the SMACKS / OOCSS conventions.

This is the default form: 

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
<!-- More coontent in form here  -->

If I want to override the input style it would seem to me to keep with conventions to add a class of form-control-newstyle: 

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
<!-- More coontent in form here  -->

However I also want to style the label. Should I add a new style to the label or to the div.form-group?

Upvotes: 0

Views: 169

Answers (1)

Christina
Christina

Reputation: 34642

.form-group wraps around form groups label and an input, it acts like a .row in a .form-horizontal and otherwise, when the form stacks on smaller viewports there's some vertical space so it all doesn't squish together.

The default label style that goes on all labels is:

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

To do 

.form-group label {}

Would affect all labels if you've properly formatted your forms.

If you just want to isolate it to a specific label you can make a class for that label and assign a class to just that label. If you want to affect all labels you can just modify the label element.

You can also make a new parent class for anything wrapping around that form and address the label styling like that.

Upvotes: 0

Related Questions