![]() ![]() The Bootstrap 3 grid comes in four (4) sizes to accomodate different screen (or viewport) widths. ![]() In addition to the concept of column width, Bootstrap has different “breakpoints” or grid sizes. The columns consume a percentage width of the parent container. To enable or “set” a column width in your layout, simply use the appropriate col-*-* class in your HTML markup. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row. Bootstrap’s grid columns are identified by different col-(breakpoint)-(units) CSS classes. This makes adapting to a variety of layouts much easier. The reason Bootstrap has a 12-unit grid (instead of 10, 16, etc.) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). The Magic of Bootstrap’s Grid - Container > Row > Columns Horizontal layout across the page is relevant because screen width is an important consideration for responsive design. Only columns should be the immediate children of rows. Each row is divided horizontally using Bootstrap’s column classes col-*. row is made complete with columns (col-*). There are other reasons Bootstrap uses the negative margins including simpler CSS, nesting and column wrapping which is discussed later in this article. But, as you can see here this doesn’t work well since the first & last columns rendered visually, can be different than the actual first & last columns in the HTML markup of any given row. Some grid systems instead adjust the padding (or margin) on the first/last columns using CSS child selector logic. The “negative margin” approach isn’t just a gimmick. This evens up the gutters of the leftmost & rightmost columns with the outer edge of the container. Instead of using a specific class like `.first` or `.last` on those outer grid columns, Bootstrap uses negative margins. The outer columns (leftmost & rightmost) need to have 1/2 of the gutter (15px) on the outside to keep spacing consistent. The effective gutter displayed between neighboring columns in 30px. In the case of Bootstrap, the gutter is created using padding of 15px around each column. There are several reasons why the “negative margin” approach is used in Bootstrap.Īll grid systems have spacing or “gutters” around columns. The end result is no visual spacing (margin or padding) on the sides of the row within the container. row uses negative margins (-15px) to counteract the padding (15px) of the container. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |