Bootstrap 4 Grid 14 Col Same Size In 2 Rows - Stack Overflow

Trang chủ » Html Bootstrap Col Size » Bootstrap 4 Grid 14 Col Same Size In 2 Rows - Stack Overflow

Có thể bạn quan tâm

Bootstrap grid divides the page into 12 columns by default, however you are able to create as many columns as you want by using the "col" class without specifying the size. This way the row will be divided into as many columns as you create.

Example: https://codepen.io/MimoTooThanks/pen/RwaWzjO

<div class="container-fluid"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> </div> <div class="row"> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> <div class="col">13</div> <div class="col">14</div> </div> </div>

remember you still can use responsive classes in conjunction with that, like so: https://codepen.io/MimoTooThanks/pen/zYqvVMj

<div class="container-fluid"> <div class="row"> <div class="col-12 col-md">1</div> <div class="col-12 col-md">2</div> </div> </div>

"col-12" says these columns will span 12 columns (full page) at any screen size since it's not specified.

Screens bigger than medium will display the columns side by side however. That's because of the "col-md" class. In this case, because there is no column size defined, this is basically saying "if the screen is medium or bigger, make the columns equal" which also overrides the previous "col-12" class.

Please take a look at the bootstap grid docs: https://getbootstrap.com/docs/4.0/layout/grid/

EDIT:

See the example here on forcing your columns to stay equal width by using max-width and a media query that matches a bootstrap breakpoint: https://codepen.io/MimoTooThanks/pen/gOraVvm

@media (min-width: 768px) { .col { max-width: 14.28571428571429% } }

Note: you'll need to re-calculate the percentage if you change the number of columns.

Từ khóa » Html Bootstrap Col Size