CODEWITHSUNDEEP
csstwitter-bootstrap
Some User
Some User

Reputation: 5827

Bootstrap - Full Width Layout

I have an app that uses Bootstrap. In this app, I have a list of items that I can reorder. Currently, my list looks like this:

<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
  <li>
    <i class="fa fa-reorder"></i>
    <div class="form-group">
      <input type="text" class="form-control col-md-8">
    </div>
    <i class="fa fa-times-circle"></i>
  </li>

  <li>
    <i class="fa fa-reorder"></i>
    <div class="form-group">
      <input type="text" class="form-control col-md-8">
    </div>
    <i class="fa fa-times-circle"></i>
  </li>

  <li>
    <i class="fa fa-reorder"></i>
    <div class="form-group">
      <input type="text" class="form-control col-md-8">
    </div>
    <i class="fa fa-times-circle"></i>
  </li>
</ul>
</div>

I'm trying to make this list such that each item fills the entire width of the entire space. In other words, I want it to looks like this:

div

+---------------------------------------------------------------------------+
|                                                                           |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
|                                                                           |
+---------------------------------------------------------------------------+

At the moment, when I do this, I get the input field on a different line and I can't get each list item to fill the available space. What am I missing?

Upvotes: 1

Views: 103

Answers (4)

rEDSAMK
rEDSAMK

Reputation: 109

Try to use bootrstrap inline forms

<li class="form-inline">     
   <div class="form-group">
    <i class="fa fa-reorder"></i>
    <input type="text" class="form-control col-md-8">
    <i class="fa fa-times-circle"></i>
   </div>
</li>

Upvotes: 0

Bubblesphere
Bubblesphere

Reputation: 449

You can achieve this using float with an explicit width on your icon, and adding overflow:hidden to the input codepen

HTML

<ul id="choices" class="list-unstyled">
  <li>
    <i class="fa fa-reorder left"></i>
    <i class="fa fa-times-circle right"></i>
    <div class="middle"><input type="text" class="form-control"></div>
  </li>
</ul>

CSS

.left {
    width: 50px;
    float: left;
}

.right {
    width: 50px;
    float: right;
}

.middle {
    overflow: hidden;
}

Upvotes: 1

Ruben Pirotte
Ruben Pirotte

Reputation: 386

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
  <li>
    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
      <input type="text" class="form-control col-md-8">
      <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
    </div>
  </li>

  <li>
    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
      <input type="text" class="form-control col-md-8">
      <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
    </div>
  </li>

  <li>
    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
      <input type="text" class="form-control col-md-8">
      <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
    </div>
  </li>
</ul>
</div>

you can add icons to each side of an input with bootstrap

take a look at this:

bootstrap input addons

see following for an example with font awesome icons (go to bootstrap 3 examples)

font awesome examples

Upvotes: 2

Imran
Imran

Reputation: 11

try col-xs-12 and width attribute in styles

Upvotes: -1

Related Questions