[B]HTML[/B]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid 3 kolommen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
Dit is de linker kolom
</div>
<div class="col-sm-4">
Dit is de middelste kolom
</div>
<div class="col-sm-4">
Dit is de rechter kolom
</div>
</div>
</div>
</body>
</html>
[B]CSS[/B] (bestand style.css)
/* normalize root */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@-ms-viewport {
width: device-width;
}
html {
height: 100%;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
}
body {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 14px;
line-height: 1.43;
font-weight: 400;
background-color: purple;
color: white;
}
/* grid */
.container {
/* optioneel: max. breedte van 3 kolommen bij elkaar (320px - 1170px) */
/* max-width: 1024px; */
width: 100%;
min-height: 100%;
margin: 0 auto;
padding: 0 15px;
/* optioneel: afwijkende achtergrondkleur voor kolommen */
/* background-color: blue; */
}
@media (min-width:768px) {
.container {width: 750px;}
}
@media (min-width:992px) {
.container {width: 970px;}
}
@media (min-width:1200px) {
.container {width: 1170px;}
}
.row {
margin: 0 -15px;
}
.col-sm-4 {
position: relative;
min-height: 1px;
padding: 0 15px;
/* alleen voor test: border is omtrek van content */
border: 1px solid yellow;
}
@media (min-width:768px) {
.col-sm-4 {
float: left;
width: 33.333%;
}
}
/* clear float's zodat volgende html onder container of row komt */
.container:after, .container:before, .row:after, .row:before {
display:table;
content:" "
}
.container:after, .row:after {
clear:both
}
/* hieronder de rest van de css */