Making Grid / Column in Web Page with CSS without using Bootstrap
Making Grid / Column in Web Page with CSS without using Bootstrap.
CSS Code:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
.clear{ clear: left; }
To make responsive page, add below code in angle brackets in head tag, this well maintain word size in all size of devices:
meta name="viewport" content="width=device-width, initial-scale=1"
Watch video Making Grid / Column in Web Page with CSS without using Bootstrap online without registration, duration hours minute second in high quality. This video was added by user Enriching Life 30 April 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 380 once and liked it 7 people.