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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Jon Doe
  • 2,172
  • 1
  • 18
  • 35

3 Answers3

53

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • @ChristianJuth No worries. Some further reading that might be helpful: http://www.sitepoint.com/understanding-bootstrap-grid-system/ and http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/ – TylerH Apr 17 '15 at 22:02
  • 1
    From bootstrap site "Content should be placed within columns, and only columns may be immediate children of rows." http://getbootstrap.com/css/#grid-intro – baligena Jul 28 '16 at 12:51
  • 2
    @baligena Yes, only columns may be immediate children of rows, but rows can be immediate children of columns, too. – TylerH Jul 28 '16 at 13:04
  • 2
    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 Oct 03 '16 at 10:24
  • 1
    @Rodrigo As the big quote in my answer says, "**put a row** of columns inside an existing column". – TylerH Oct 03 '16 at 12:57
  • 1
    @Rodrigo also see [my comment below](http://stackoverflow.com/questions/29710013/can-i-have-a-bootstrap-col-inside-of-another-col/29710073?noredirect=1#comment47556736_29710235); columns don't *need* to be within a row. http://stackoverflow.com/questions/12994012/must-bootstrap-container-elements-include-row-elements – TylerH Oct 03 '16 at 14:04
  • -1. The answer is misleading. In the code provided, the OP is nesting columns inside other columns without any row in the middle. Your answer states that you can include a **row of colums**, not columns directly. – David Oct 04 '17 at 11:10
  • 1
    @David That's incorrect, you're inferring what was not implied by the Bootstrap documentation. "A row of columns" here just refers to a group or collection of columns, not an actual `row` class. See https://jsfiddle.net/6L2Lcapd/ to demonstrate columns nested directly within other columns. – TylerH Oct 04 '17 at 13:29
  • @David I'd also suggest you read my comments above as well as my comments on mistykristie's answer specifying exactly that ("columns don't **have** to be in a row") – TylerH Oct 04 '17 at 13:31
  • I don't agree. I read all the comments and I stand by what I said.. The [docs](https://getbootstrap.com/docs/3.3/css/#grid-nesting) are pretty clear about nesting: it doesn't say "add a row", it says "add a `.row`", so it is referring nothing but a class. In your fiddle, the cols are not reaching the sides of the row and that is not the expected behaviour. Of course, you can put a container inside a row and the row inside a column, you can apply css classes as you want, but it is not the intended structure of Bootstrap and you will get unexpected results. – David Oct 05 '17 at 07:05
  • @David Yes, and OP simply asked if it would work fine, which it does; he also asks for 'better ways', so feel free to add a different answer if you have another way to solve OP's problem. – TylerH Oct 05 '17 at 14:37
  • @David However, I will add a blurb about the function of the .row container, because that is useful for painting a complete picture, despite not being required for `.col`s to work. – TylerH Oct 05 '17 at 14:41
  • 1
    You can also put the `.row` class on the same element as the `.col-` class(es) to remove the gutters. – Extragorey Oct 01 '20 at 00:43
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.

mistykristie
  • 567
  • 3
  • 13
  • But you added a `.row` to on input without applying it to the other inputs. That is why the sizing is weird. – Jon Doe Apr 17 '15 at 23:23
  • 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](https://getbootstrap.com/docs/3.3/css/#grid-nesting) 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 Oct 04 '17 at 11:16
  • 3
    @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 Oct 05 '17 at 14:30
  • @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. – David Oct 05 '17 at 18:47
-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>
3LaaM
  • 1