CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Rockstart
Rockstart

Reputation: 2377

Row spanning in Bootstrap Grid design

I am using the Grid layout in Bootstrap.

How do I make a particular control(say text area) span for 3 rows in this grid design?

Is it possible with Grid layout?

enter image description here

Upvotes: 0

Views: 402

Answers (2)

reblace
reblace

Reputation: 4195

You essentially want to use a nested grid or a form group.

First, split the page into two columns, the left with more than one row and the right with only one row. In the provided example, I demonstrate how you could use a form group in the left column to get the labels/inputs exactly as in your diagram. 

<div class="row">

  <!-- Left Column -->
  <div class="col-sm-6">
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-3 control-label">Input 1</label>
        <div class="col-sm-9">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Input 2</label>
        <div class="col-sm-9">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Input 3</label>
        <div class="col-sm-9">
          <input type="text" class="form-control">
        </div>
      </div>
    </form>
  </div>

  <!-- Right Column -->
  <div class="col-sm-6">
    <textarea class="form-control" rows="3"></textarea>
  </div>

</div>

See this working Plnkr example

  • Note that the plnkr needs to be wide enough to not apply the responsive layout and stack

If instead you wanted to use a nested grid to get the same effect, you would just define a new grid with rows/columns inside the left column.

Upvotes: 2

PixelPlex
PixelPlex

Reputation: 794

I did not test this, but try something like this:

<div class="row">
    <div class="col-md-9">
        <div class="col-md-12">.col-md-12</div>
        <div class="col-md-12">.col-md-12</div>
        <div class="col-md-12">.col-md-12</div>
    </div>
    <div class="col-md-3">.col-md-3</div>
</div>

This uses the nested columns, like @user3711852 suggested.

Upvotes: 1

Related Questions