Menu
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>
782
You can nest columns once you have a container, row, and column set up. To do this, add a new row <div> within the parent column's code, then add your nested columns. It will function as if the area inside the new row is its own grid system.
Simply use col-sm-12 .
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
Defining columns in HTMLMore columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added. <div class="column" > tag is used to add the corresponding number of columns.
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.
105
answered Oct 15 '22 01:10
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
