CODEWITHSUNDEEP
csstwitter-bootstrap
saimcan
saimcan

Reputation: 1762

Twitter Bootstrap fluid container including maxwidth elements

Simple question : i'd like to see inner elements with their maximized widths.
P.S. I'm using Twitter Bootstrap 3.3.0. which supports .container-fluid

<div class="row form-group form-inline">
   <div class="container-fluid">
      <input type="text" class="form-control" name="1">
      <input type="text" class="form-control" name="2">
      <input type="text" class="form-control" name="3">
   </div>
</div>

Elements seems okay, i just want each of them to share %33.3 of a row with their widths.
Additional info : i don't want to try following example, because there's so much space between 

<div class="row form-group form-inline">
   <div class="container-fluid">
      <div class="col-sm-2">
         <input type="text" class="form-control" name="1">
      </div>
      <div class="col-sm-2">
         <input type="text" class="form-control" name="2">
      </div>
      <div class="col-sm-2">
          <input type="text" class="form-control" name="3">
      </div>
   </div>
</div>

Thanks in advance.

Upvotes: 1

Views: 459

Answers (1)

Thomas
Thomas

Reputation: 2367

Adding col-sm-xx directly to the input fields won't work, because bootstrap itself will override the width with width:auto.

You need to put the inputs in columns. It's col-sm-4 for 33% of the parent container. Also, the inputs need 100% width to fill the whole column.

.form-inline [class*=col] {
  padding: 0;  
}
.form-inline input.form-control {
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row form-group form-inline">
   <div class="container-fluid">
      <div class="col-sm-4">
         <input type="text" class="form-control" name="1">
      </div>
      <div class="col-sm-4">
         <input type="text" class="form-control" name="2">
      </div>
      <div class="col-sm-4">
          <input type="text" class="form-control" name="3">
      </div>
   </div>
</div>

Upvotes: 1

Related Questions