41

I am still new to Bootstrap and I am trying to figure out what is correct and what is not. Is it acceptable to have a col inside of a col? In the example below, I have a form that I want to fit half of the screen. I also want certain form-control elements to be half size while other of full width. Would this be the correct way to go about this or is there a better way?

Example code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<section class="row">
  <div class="container">
    <div class="col-xs-12 text-center">
      <h1>Contact</h1>
    </div>
    <form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal">
      <div class="form-group form-group-lg">
        <div class="col-sm-12">
          <input class="form-control" type="text" placeholder="name">
        </div>
      </div>
      <div class="form-group form-group-lg">
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="email">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="website">
        </div>
      </div>
      <button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12">Submit</button>
    </form>
  </div>
</section>

Improve this question

3 Answers 3

Reset to default
55

Yes, that's OK to have, according to Bootstrap's Grid Template guide:

Two columns with two nested columns --

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

However, there is a point to a Bootstrap .row, which is to apply a negative margin in order to align content. If you don't mind gutters, or are capable of adjusting the columns yourself to account for this, then there's no point in adding a .row container for your nested columns. You can put a .row class on the same element as .col to remove these gutters, as well (thanks to Extragory for pointing that out).

Likewise, not wrapping a column in a row will result in certain properties not applying correctly like the flex properties on the .col class. .row has display: flex, which is required for any children with flex properties to apply those properties... otherwise they will get ignored.

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

From bootstrap site "Content should be placed within columns, and only columns may be immediate children of rows." getbootstrap.com/css/#grid-intro
@baligena Yes, only columns may be immediate children of rows, but rows can be immediate children of columns, too.
No it´s not OK. You can nest columns inside columns as long as those nested columns "live" inside a row. In fact, if you check the html behind that very example on Bootstrap documentation you will see that those nested columns are in fact placed inside a row. Go on, follow the link given in the answer, right click on the columns and Inspect Element.
@Rodrigo As the big quote in my answer says, "put a row of columns inside an existing column".
@Rodrigo also see my comment below; columns don't need to be within a row. stackoverflow.com/questions/12994012/…
|
20

You can have columns nested as many levels deep as you'd like, but they should generally be inside a row. The rows have negative margins to account for the padding on the columns, so if you have columns nested inside columns without a row in between, it will mess up the alignment of your page.

Improve this answer

4 Comments

But you added a .row to on input without applying it to the other inputs. That is why the sizing is weird.
You stepped back with no reason. Columns must be in a row (for the reason you have explained) according any example and reference in the docs. In the same link that TylerH has provided you can read: "Nesting columns: To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column". This should be the accepted answer.
@David Wrong; please read and consider all the commentary before making such claims. The most relevant link for to read is the one saying "columns don't need to be within a row". Seeing the proof and ignoring it is one thing, but arguing that others must ignore it is harmful and disingenuous. Not to mention the Bootstrap documentation doesn't specify they must be children of rows.
@TylerH I read all the comments. From the link you provided: "The bootstrap grid is composed of 12 columns that can be adjusted in any combination within a row" and "the .row container has a separate task and is there (and required) to readjust the last grid columns gutter width". You didn't provide any new argument so I stand by what I said. And, regarding my comment being "harmful and disingenuous", well, I can just wish you a nice day and encourage you to use Bootstrap as you consider convenient: at the end, is just code, not a matter of live or death.
-1 
<section class="options pt-3 pb-5" id="options">
    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-md-7">
                <div class="options_title text-start pt-5 pb-2">
                    <h2 class="pt-5 pb-2">Crafted for Startup, SaaS <br> and Business Sites.</h2>
                    <p class="options_p pt-1 pb-5">The main ‘thrust’ is to focus on educating attendees on how to <br> best
                        protect highly
                        vulnerable business applications with <br> interactive panel discussions and roundtables.
                    </p>
                </div>
                <div class="options_check d-flex justify-content-start align-items-start text-start">
                    <div class="col-md-3 text-start">
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Premium quality</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> No code required</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Use for lifetime</p>
                    </div>
                    <div class="col-md-3 text-start">
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Regular updates</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Rich document</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Developer friendly</p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 pt-5">
                <img src="img/options-image.svg" alt="">
            </div>
        </div>
    </div>
</section>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.