<div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div> <div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div> <div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div> <div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div> </div> <br> <div class="row"> <div class="col-lg-6 col-md-12">col-lg-6 col-md-12</div> <div class="col-lg-6 col-md-12">col-lg-6 col-md-12</div> </div> <br> <div class="row"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> lg-2 md-3 sm-4 xs-6 </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> lg-2 md-3 sm-4 xs-6 </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> lg-2 md-3 sm-4 xs-6 </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> lg-2 md-3 sm-4 xs-6 </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> lg-2 md-3 sm-4 xs-6 </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> lg-2 md-3 sm-4 xs-6 </div> </div> </div>
body { font-size: 11px; } div[class^="col-"] { border: 1px solid #a9a9a9; padding-top: 5px; padding-bottom: 5px; background: #dfe2e2; } div[class^="col-auto"] { background: lightblue; } .container, .col-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 1rem; padding-right: 1rem; } .row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } .col-auto { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 0 !important; -ms-flex: 1 1 0 !important; flex: 1 1 0 !important; } .row > div { -webkit-flex-basis: 100%; flex-basis: 100%; } .col-xs-1 { -webkit-flex-basis: 8.333333333333334% !important; flex-basis: 8.333333333333334% !important; } .col-xs-2 { -webkit-flex-basis: 16.666666666666668% !important; flex-basis: 16.666666666666668% !important; } .col-xs-3 { -webkit-flex-basis: 25% !important; flex-basis: 25% !important; } .col-xs-4 { -webkit-flex-basis: 33.333333333333336% !important; flex-basis: 33.333333333333336% !important; } .col-xs-5 { -webkit-flex-basis: 41.66666666666667% !important; flex-basis: 41.66666666666667% !important; } .col-xs-6 { -webkit-flex-basis: 50% !important; flex-basis: 50% !important; } .col-xs-7 { -webkit-flex-basis: 58.333333333333336% !important; flex-basis: 58.333333333333336% !important; } .col-xs-8 { -webkit-flex-basis: 66.66666666666667% !important; flex-basis: 66.66666666666667% !important; } .col-xs-9 { -webkit-flex-basis: 75% !important; flex-basis: 75% !important; } .col-xs-10 { -webkit-flex-basis: 83.33333333333334% !important; flex-basis: 83.33333333333334% !important; } .col-xs-11 { -webkit-flex-basis: 91.66666666666667% !important; flex-basis: 91.66666666666667% !important; } .col-xs-12 { -webkit-flex-basis: 100% !important; flex-basis: 100% !important; } .col-xs-offset-1 { margin-left: 8.333333333333334%; } .col-xs-offset-2 { margin-left: 16.666666666666668%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.333333333333336%; } .col-xs-offset-5 { margin-left: 41.66666666666667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.333333333333336%; } .col-xs-offset-8 { margin-left: 66.66666666666667%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.33333333333334%; } .col-xs-offset-11 { margin-left: 91.66666666666667%; } @media (min-width: 768px) { .col-sm-1 { -webkit-flex-basis: 8.333333333333334% !important; flex-basis: 8.333333333333334% !important; } .col-sm-2 { -webkit-flex-basis: 16.666666666666668% !important; flex-basis: 16.666666666666668% !important; } .col-sm-3 { -webkit-flex-basis: 25% !important; flex-basis: 25% !important; } .col-sm-4 { -webkit-flex-basis: 33.333333333333336% !important; flex-basis: 33.333333333333336% !important; } .col-sm-5 { -webkit-flex-basis: 41.66666666666667% !important; flex-basis: 41.66666666666667% !important; } .col-sm-6 { -webkit-flex-basis: 50% !important; flex-basis: 50% !important; } .col-sm-7 { -webkit-flex-basis: 58.333333333333336% !important; flex-basis: 58.333333333333336% !important; } .col-sm-8 { -webkit-flex-basis: 66.66666666666667% !important; flex-basis: 66.66666666666667% !important; } .col-sm-9 { -webkit-flex-basis: 75% !important; flex-basis: 75% !important; } .col-sm-10 { -webkit-flex-basis: 83.33333333333334% !important; flex-basis: 83.33333333333334% !important; } .col-sm-11 { -webkit-flex-basis: 91.66666666666667% !important; flex-basis: 91.66666666666667% !important; } .col-sm-12 { -webkit-flex-basis: 100% !important; flex-basis: 100% !important; } .col-sm-offset-1 { margin-left: 8.333333333333334%; } .col-sm-offset-2 { margin-left: 16.666666666666668%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.333333333333336%; } .col-sm-offset-5 { margin-left: 41.66666666666667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.333333333333336%; } .col-sm-offset-8 { margin-left: 66.66666666666667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333333333334%; } .col-sm-offset-11 { margin-left: 91.66666666666667%; } } @media (min-width: 992px) { .col-md-1 { -webkit-flex-basis: 8.333333333333334% !important; flex-basis: 8.333333333333334% !important; } .col-md-2 { -webkit-flex-basis: 16.666666666666668% !important; flex-basis: 16.666666666666668% !important; } .col-md-3 { -webkit-flex-basis: 25% !important; flex-basis: 25% !important; } .col-md-4 { -webkit-flex-basis: 33.333333333333336% !important; flex-basis: 33.333333333333336% !important; } .col-md-5 { -webkit-flex-basis: 41.66666666666667% !important; flex-basis: 41.66666666666667% !important; } .col-md-6 { -webkit-flex-basis: 50% !important; flex-basis: 50% !important; } .col-md-7 { -webkit-flex-basis: 58.333333333333336% !important; flex-basis: 58.333333333333336% !important; } .col-md-8 { -webkit-flex-basis: 66.66666666666667% !important; flex-basis: 66.66666666666667% !important; } .col-md-9 { -webkit-flex-basis: 75% !important; flex-basis: 75% !important; } .col-md-10 { -webkit-flex-basis: 83.33333333333334% !important; flex-basis: 83.33333333333334% !important; } .col-md-11 { -webkit-flex-basis: 91.66666666666667% !important; flex-basis: 91.66666666666667% !important; } .col-md-12 { -webkit-flex-basis: 100% !important; flex-basis: 100% !important; } .col-md-offset-1 { margin-left: 8.333333333333334%; } .col-md-offset-2 { margin-left: 16.666666666666668%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.333333333333336%; } .col-md-offset-5 { margin-left: 41.66666666666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.333333333333336%; } .col-md-offset-8 { margin-left: 66.66666666666667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333333334%; } .col-md-offset-11 { margin-left: 91.66666666666667%; } } @media (min-width: 1200px) { .col-lg-1 { -webkit-flex-basis: 8.333333333333334% !important; flex-basis: 8.333333333333334% !important; } .col-lg-2 { -webkit-flex-basis: 16.666666666666668% !important; flex-basis: 16.666666666666668% !important; } .col-lg-3 { -webkit-flex-basis: 25% !important; flex-basis: 25% !important; } .col-lg-4 { -webkit-flex-basis: 33.333333333333336% !important; flex-basis: 33.333333333333336% !important; } .col-lg-5 { -webkit-flex-basis: 41.66666666666667% !important; flex-basis: 41.66666666666667% !important; } .col-lg-6 { -webkit-flex-basis: 50% !important; flex-basis: 50% !important; } .col-lg-7 { -webkit-flex-basis: 58.333333333333336% !important; flex-basis: 58.333333333333336% !important; } .col-lg-8 { -webkit-flex-basis: 66.66666666666667% !important; flex-basis: 66.66666666666667% !important; } .col-lg-9 { -webkit-flex-basis: 75% !important; flex-basis: 75% !important; } .col-lg-10 { -webkit-flex-basis: 83.33333333333334% !important; flex-basis: 83.33333333333334% !important; } .col-lg-11 { -webkit-flex-basis: 91.66666666666667% !important; flex-basis: 91.66666666666667% !important; } .col-lg-12 { -webkit-flex-basis: 100% !important; flex-basis: 100% !important; } .col-lg-offset-1 { margin-left: 8.333333333333334%; } .col-lg-offset-2 { margin-left: 16.666666666666668%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.333333333333336%; } .col-lg-offset-5 { margin-left: 41.66666666666667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.333333333333336%; } .col-lg-offset-8 { margin-left: 66.66666666666667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333333333334%; } .col-lg-offset-11 { margin-left: 91.66666666666667%; } }