CODEWITHSUNDEEP
lesstwitter-bootstrap-3mixins
atdev
atdev

Reputation: 529

Bootstrap 3 form and form-horizontal easier styling

We are using PHP to dynamically generate form HTML using Bootstrap 3.

In bootstrap 2 it was a bit easier to switch the form styling without changing the markup within the form. We only had to change the form class from "form" to "form-horizontal". This made it extremely easy to dynamically generate form code and change the design/display.

In bootstrap 3 this is no longer possible and the html markup within the form has to be modified to add the "col" classes for a horizontal form. We need to be able to override all of the col-xx-x classes if they are within a form with the class "form" or "form-inline" to prevent us from having to change the markup for each form class. Do I need to write a new mixin for this? If so any examples?

A small example of the resulting CSS would be something like:

.form .col-lg-1, .form .col-lg-2, .form .col-lg-3, .form .col-lg-4, 
.form .col-lg-5, .form .col-lg-6, .form .col-lg-7, .form .col-lg-8,
.form .col-lg-9, .form .col-lg-10, .form .col-lg-11, .form .col-lg-12, 
.form .col-lg-13, .form .col-lg-  14, .form .col-lg-15, .form .col-lg-16,
.form .col-lg-17, .form .col-lg-18, .form .col-lg-19, .form .col-lg-20,
.form .col-lg-21, .form .col-lg-22, .form .col-lg-23 { 
    float: none 
}

Upvotes: 0

Views: 323

Answers (2)

ScottS
ScottS

Reputation: 72261

It seems an attribute selector would work well here too:

.form [class^='col-lg-'], /* starts with col-lg- class */
.form [class*=' col-lg-'], /* contains later value starting with col-lg- */
.form-inline [class^='col-lg-'],
.form-inline [class*=' col-lg-'] {
   float: none;
}

Upvotes: 0

atdev
atdev

Reputation: 529

It seems it might be easier to just override these using the "control-label" class and then also add another class to the div that surrounds the controls.

Example:

.form .control-label,
.form .controls {
   float: none;
   width: auto;
   padding: 0;
}

As long as the has a class of "control-label" and the div surrounding the actual input has a class of "controls" this seems to work fine.

Upvotes: 1

Related Questions