Example For Bootstrap-5-columns - Plunker

Trang chủ » Html Col-md-5 » Example For Bootstrap-5-columns - Plunker

Có thể bạn quan tâm

<!DOCTYPE html> <html> <head> <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-5-columns.css" /> </head> <body> <div class="container"> <h2>col-xs-5th-*</h2> <div class="row"> <div class="col-xs-5th-2"> <div class="bg-success">Two fifth</div> </div> <div class="col-xs-5th-3"> <div class="bg-info">Three fifth</div> </div> </div> <hr> <div class="row"> <div class="col-xs-5th-1"> <div class="bg-success">One fifth</div> </div> <div class="col-xs-5th-1 col-xs-5th-offset-1"> <div class="bg-info">One fifth and offset by one fifth</div> </div> <div class="col-xs-5th-2"> <div class="bg-warning">Two fifth</div> </div> </div> <h2>col-sm-5th-*</h2> <div class="row"> <div class="col-sm-5th-2"> <div class="bg-success">Two fifth</div> </div> <div class="col-sm-5th-3"> <div class="bg-info">Three fifth</div> </div> </div> </div> </body> </html> .col-xs-5th-1, .col-sm-5th-1, .col-md-5th-1, .col-lg-5th-1, .col-xs-5th-2, .col-sm-5th-2, .col-md-5th-2, .col-lg-5th-2, .col-xs-5th-3, .col-sm-5th-3, .col-md-5th-3, .col-lg-5th-3, .col-xs-5th-4, .col-sm-5th-4, .col-md-5th-4, .col-lg-5th-4, .col-xs-5th-5, .col-sm-5th-5, .col-md-5th-5, .col-lg-5th-5 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-5th-1, .col-xs-5th-2, .col-xs-5th-3, .col-xs-5th-4, .col-xs-5th-5 { float: left; } .col-xs-5th-5 { width: 100%; } .col-xs-5th-4 { width: 80%; } .col-xs-5th-3 { width: 60%; } .col-xs-5th-2 { width: 40%; } .col-xs-5th-1 { width: 20%; } .col-xs-5th-pull-5 { right: 100%; } .col-xs-5th-pull-4 { right: 80%; } .col-xs-5th-pull-3 { right: 60%; } .col-xs-5th-pull-2 { right: 40%; } .col-xs-5th-pull-1 { right: 20%; } .col-xs-5th-pull-0 { right: auto; } .col-xs-5th-push-5 { left: 100%; } .col-xs-5th-push-4 { left: 80%; } .col-xs-5th-push-3 { left: 60%; } .col-xs-5th-push-2 { left: 40%; } .col-xs-5th-push-1 { left: 20%; } .col-xs-5th-push-0 { left: auto; } .col-xs-5th-offset-5 { margin-left: 100%; } .col-xs-5th-offset-4 { margin-left: 80%; } .col-xs-5th-offset-3 { margin-left: 60%; } .col-xs-5th-offset-2 { margin-left: 40%; } .col-xs-5th-offset-1 { margin-left: 20%; } .col-xs-5th-offset-0 { margin-left: 0%; } @media (min-width: 768px) { .col-sm-5th-1, .col-sm-5th-2, .col-sm-5th-3, .col-sm-5th-4, .col-sm-5th-5 { float: left; } .col-sm-5th-5 { width: 100%; } .col-sm-5th-4 { width: 80%; } .col-sm-5th-3 { width: 60%; } .col-sm-5th-2 { width: 40%; } .col-sm-5th-1 { width: 20%; } .col-sm-5th-pull-5 { right: 100%; } .col-sm-5th-pull-4 { right: 80%; } .col-sm-5th-pull-3 { right: 60%; } .col-sm-5th-pull-2 { right: 40%; } .col-sm-5th-pull-1 { right: 20%; } .col-sm-5th-pull-0 { right: auto; } .col-sm-5th-push-5 { left: 100%; } .col-sm-5th-push-4 { left: 80%; } .col-sm-5th-push-3 { left: 60%; } .col-sm-5th-push-2 { left: 40%; } .col-sm-5th-push-1 { left: 20%; } .col-sm-5th-push-0 { left: auto; } .col-sm-5th-offset-5 { margin-left: 100%; } .col-sm-5th-offset-4 { margin-left: 80%; } .col-sm-5th-offset-3 { margin-left: 60%; } .col-sm-5th-offset-2 { margin-left: 40%; } .col-sm-5th-offset-1 { margin-left: 20%; } .col-sm-5th-offset-0 { margin-left: 0%; } } @media (min-width: 992px) { .col-md-5th-1, .col-md-5th-2, .col-md-5th-3, .col-md-5th-4, .col-md-5th-5 { float: left; } .col-md-5th-5 { width: 100%; } .col-md-5th-4 { width: 80%; } .col-md-5th-3 { width: 60%; } .col-md-5th-2 { width: 40%; } .col-md-5th-1 { width: 20%; } .col-md-5th-pull-5 { right: 100%; } .col-md-5th-pull-4 { right: 80%; } .col-md-5th-pull-3 { right: 60%; } .col-md-5th-pull-2 { right: 40%; } .col-md-5th-pull-1 { right: 20%; } .col-md-5th-pull-0 { right: auto; } .col-md-5th-push-5 { left: 100%; } .col-md-5th-push-4 { left: 80%; } .col-md-5th-push-3 { left: 60%; } .col-md-5th-push-2 { left: 40%; } .col-md-5th-push-1 { left: 20%; } .col-md-5th-push-0 { left: auto; } .col-md-5th-offset-5 { margin-left: 100%; } .col-md-5th-offset-4 { margin-left: 80%; } .col-md-5th-offset-3 { margin-left: 60%; } .col-md-5th-offset-2 { margin-left: 40%; } .col-md-5th-offset-1 { margin-left: 20%; } .col-md-5th-offset-0 { margin-left: 0%; } } @media (min-width: 1200px) { .col-lg-5th-1, .col-lg-5th-2, .col-lg-5th-3, .col-lg-5th-4, .col-lg-5th-5 { float: left; } .col-lg-5th-5 { width: 100%; } .col-lg-5th-4 { width: 80%; } .col-lg-5th-3 { width: 60%; } .col-lg-5th-2 { width: 40%; } .col-lg-5th-1 { width: 20%; } .col-lg-5th-pull-5 { right: 100%; } .col-lg-5th-pull-4 { right: 80%; } .col-lg-5th-pull-3 { right: 60%; } .col-lg-5th-pull-2 { right: 40%; } .col-lg-5th-pull-1 { right: 20%; } .col-lg-5th-pull-0 { right: auto; } .col-lg-5th-push-5 { left: 100%; } .col-lg-5th-push-4 { left: 80%; } .col-lg-5th-push-3 { left: 60%; } .col-lg-5th-push-2 { left: 40%; } .col-lg-5th-push-1 { left: 20%; } .col-lg-5th-push-0 { left: auto; } .col-lg-5th-offset-5 { margin-left: 100%; } .col-lg-5th-offset-4 { margin-left: 80%; } .col-lg-5th-offset-3 { margin-left: 60%; } .col-lg-5th-offset-2 { margin-left: 40%; } .col-lg-5th-offset-1 { margin-left: 20%; } .col-lg-5th-offset-0 { margin-left: 0%; } }

Từ khóa » Html Col-md-5