Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 2-column form layout

I am still learning the proper use of Bootstrap 3 and was wondering if you all could help me out. I would like a layout something like this:

Label                        Label
Textbox                      Textbox

Label                        Label
Textbox                      Textbox

Label                        Label
Textbox Textbox              Textarea

I know that if I use the .form-group it will allow me to accomplish the Label over the top of the textbox. How can I assure that this happens in a column yet allows for some inline things like the example with the two textboxes alongside each other?

like image 949
Michael Mahony Avatar asked Jan 09 '14 22:01

Michael Mahony


2 Answers

As mentioned earlier, you can use the grid system to layout your inputs and labels anyway that you want. The trick is to remember that you can use rows within your columns to break them into twelfths as well.

The example below is one possible way to accomplish your goal and will put the two text boxes near Label3 on the same line when the screen is small or larger.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row">
        <div class="col-xs-6 form-group">
            <label>Label1</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="col-xs-6 form-group">
            <label>Label2</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <label class="col-xs-12">Label3</label>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <input class="form-control" type="text"/>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <input class="form-control" type="text"/>
                </div>
            </div>
        </div>
        <div class="col-xs-6 form-group">
            <label>Label4</label>
            <input class="form-control" type="text"/>
        </div>
    </div>
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

http://jsfiddle.net/m3u8bjv0/2/

like image 74
Mustex Avatar answered Oct 07 '22 04:10

Mustex


You could use the bootstrap grid system :

<div class="col-md-6 form-group">
    <label for="textbox1">Label1</label>
    <input class="form-control" id="textbox1" type="text"/>
</div>
<div class="col-md-6 form-group">
    <label for="textbox2">Label2</label>
    <input class="form-control" id="textbox2" type="text"/>
</div>
<span class="clearfix">

http://getbootstrap.com/css/#grid

Is that what you want to achieve?

like image 16
Yooz Avatar answered Oct 07 '22 04:10

Yooz