Basic CSS bootstrap (html, body, container, row, col [ just for 10 ] )

In this code i will be share with you how to create layout with CSS grid-column like bootstrap without cdn

<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>

© Manajmnt code

Share to :

☷✎