Basic CSS bootstrap (html, body, container, row, col [ just for 10 ] )
<style>
html{font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;scroll-behavior: smooth;}
*, ::after, ::before { box-sizing: border-box; }
body{margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.7; color: #212529; text-align: right; background-color: #fff;word-break: break-word;}
/*container*/
.container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
@media (min-width: 1200px) .container { max-width: 1140px; } @media (min-width: 992px) .container { max-width: 960px; } @media (min-width: 768px) .container { max-width: 720px; } @media (min-width: 576px) .container { max-width: 540px; }
/*container*/
/*row*/
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
/*row*/
/*col*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10{position: relative; width: 100%; padding-left: 15px; padding-right: 15px;}
@media (min-width: 768px) {.col-1 { -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; }}
@media (min-width: 768px) {.col-2 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }}
@media (min-width: 768px) {.col-3 { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; }}
@media (min-width: 768px) {.col-4 { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; }}
@media (min-width: 768px) {.col-5 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }}
@media (min-width: 768px) {.col-6 { -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; }}
@media (min-width: 768px) {.col-7 { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; }}
@media (min-width: 768px) {.col-8 { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; }}
@media (min-width: 768px) {.col-9 { -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; }}
@media (min-width: 768px) {.col-10 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }}
/*col*/
</style>
<div class="container">
<div class="row">
<div class="col-1" style="background:#ff8d00; height:200px" >1</div>
<div class="col-1" style="background:#ffd400; height:200px" >1</div>
<div class="col-1" style="background:#b5ff00; height:200px" >1</div>
<div class="col-1" style="background:#0037ff; height:200px" >1</div>
<div class="col-1" style="background:#00ffc4; height:200px" >1</div>
<div class="col-1" style="background:#fb00ff; height:200px" >1</div>
<div class="col-1" style="background:#00ff37; height:200px" >1</div>
<div class="col-1" style="background:#00a1ff; height:200px" >1</div>
<div class="col-1" style="background:red; height:200px" >1</div>
<div class="col-1" style="background:#0c0c0b; height:200px" >1</div>
</div>
</div>
![Basic CSS bootstrap (html, body, container, row, col [ just for 10 ] )](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0G862pyc6MfiC5yeD0V300PDFk8L_VXrKAtiSYibDkp-b747P8LXGY45m2P6ZjlPDxN-Yz7gn2Uad5OYujNsDCO9tojwNqNShIFuPBG0owv6T7q9X72lGwstBeWlp8nky8a_tkJGriBG0phkJBH1gFZEiUzz8Snc_vJfmVIiwZs6hb4it0IEqSRyXL4/s854/manjmnt.webp "Basic CSS bootstrap (html, body, container, row, col [ just for 10 ] )")
© 2025 Manajmnt code
Comments
Post a Comment
message