CODEWITHSUNDEEP
csstwitter-bootstrap
Shane
Shane

Reputation: 5677

Three column small layout bootstrap

<form class="container">
    <div class="row">
       <div class="col-md-1">
         <label for="vol" class="control-label">Analysis Volume</label>
       </div>
       <div class="col-md-3">
         <div id="volume">                                            
          <div class="control">
            <span class="knob"></span>
          </div>
       </div>
      </div>
      <div class="col-md-1">
         <label for="username" class="control-label vol-box">50% usage</label>
      </div>
      </div>
</form>

I have been trying to arrange these three items in a row like this in image, but i am not sure what class to apply and also in smaller devices i need to disable the column completely.

Upvotes: 0

Views: 71

Answers (1)

Brad Fletcher
Brad Fletcher

Reputation: 3593

<!-- HTML --->
<div class="module-wrap">
    <form class="container-fluid">
        <div class="row hidden-xs">
            <div class="col-md-3">
                <label for="vol" class="control-label">Analysis Volume</label>
            </div>
            <div class="col-md-6">
                <div id="volume">                                            
                    <div class="control">
                        <span class="knob"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <label for="username" class="control-label vol-box">50% usage</label>
            </div>
        </div>
    </form> 
</div>

/** CSS **/
.module-wrap {
    width: 200px;
    margin: 0 auto;
}

I added the class "hidden-xs" to the row, this will hide the div and everything in it on small devices. Also the columns must add up to a total of twelve.

You will need to wrap everything in a div to limit the total width.

I hope this solves your problem.

Upvotes: 2

Related Questions