How to Customize Responsive Columns and Inputs Fields in Twitter Bootstrap

How to customize responsive columns and inputs fields in twitter bootstrap?

I am not sure if I understand your question correct, but you can customise the behavior by using media queries

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

Maybe you have to overwrite some classes and ids. The responsive information can be found on git:

responsive.less

responsive-1200px-min.less
responsive-767px-max.less
responsive-768px-979px.less
responsive-navbar.less
responsive-utilities.less

Nevertheless play with these Settings only if you really have to.

Twitter Bootstrap: how to not scale columns to single row under 767px

I've moved this to an answer while we wait to see if this is tagged with duplicate.

To get the two columns maintained within a mobile/tablet environment You're going to need to add another set of classes on the elements as well as some additional rules in your CSS.

By default all of the elements stack on mobile because a linear version is what we've come to expect. If you check out http://foundation.zurb.com/docs/grid.php you can see that Zurb have also created another set of styles based on a 4 column mobile grid. By adding these additional classes it allows you control your columns to occupy 1/3 1/2 2/3 full width.

I've coded up a basic example for you to use -> http://playground.responsivedesign.is/twitter-bootstrap/, but below are the details.

This is the markup you would add to your HTML (the additional .mobile-* classes)

 <div class="span4 mobile-one">...</div>
 <div class="span8 mobile-three">...</div>

 <div class="span6 mobile-two">...</div>
 <div class="span6 mobile-two">...</div>

And the CSS that needs to be added is..

.row-fluid .mobile-one {
  width: 31.491712707182323%;
  *width: 31.43852121782062%;
}

.row-fluid .mobile-three {
  width: 65.74585635359117%;
  *width: 65.69266486422946%;
}

.row-fluid .mobile-two {
  width: 48.61878453038674%;
  *width: 48.56559304102504%;
}

.row-fluid .mobile-one,
.row-fluid .mobile-two,
.row-fluid .mobile-three {
  float:left;
  margin-left: 2.7624309392265194%;
  *margin-left: 2.709239449864817%;
}

You have also asked whether it would also work with .row instead of using the .fluid-row. It could do but there are some rules that come with the .fluid-row which are cascading so you will need to do a bit more trial and error work. My official stance would be to rethink your reasons for a pixel based static layout (albeit responsive with @media) and go with a fluid layout.

Twitter bootstrap 3 form-horizontal and multiple input columns on single line

To align easily things in bootstrap 3, You should use the Grid System.

Here is a fiddle close to your needs :

<body>
<form class="form-horizontal">
    <div class="row">
       <div class="form-group">
        <label class="col-sm-2">Quarter</label>
        <div class="col-sm-10"><input type="text" class="form-control" /></div>
        </div>
   </div>
    <div class="row">
        <div class="form-group">
        <label class="col-sm-2">Address</label>
        <div class="col-sm-5"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-2">Addr. №</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
    <div class="row">
         <div class="form-group">
        <label class="col-sm-2">Block name/Number</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-1">Entrance</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-1">Floor</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-2">Apartament</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
</form>
</body>

The alignment depends on the width of the screen so be sure to tune it properly to your needs. Then you can style the inputs themselves.

Five equal columns in twitter bootstrap

Use five divs with a class of span2 and give the first a class of offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila!
Five equally spaced and centered columns.

In bootstrap 3.0, this code would look like

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

UPDATE

Since bootstrap 4.0 uses Flexbox by default:

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Twitter Bootstrap Input Append not full width of container

Turns out this is a known issue and will be addressed in version 3. [SOURCE]

Twitter Bootstrap: Stop input field extending beyond well

Docs are actually saying:

Use .span1 to .span12 for inputs that match the same sizes of the grid
columns.

But you want to make a full-width <input>, right?

Make an `<input>` to take full width

input.full-width {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
}

Also remove .pull-left from the <form>. See how it woks on this fiddle.

Edit

Since Bootstrap 2.2.0 use bundled input-block-level class to achieve this effect.

How to Customize Responsive Columns and Inputs Fields in Twitter Bootstrap