카테고리 없음
[bootstrap] grid col
냐옴
2021. 5. 13. 14:20
CSS
.row {
border: 2px solid lightseagreen;
padding: 8px;
margin: 8px;
}
.col-sm-1, .col-md-1,
.col-sm-2, .col-md-2,
.col-sm-3, .col-md-3,
.col-sm-4, .col-md-4,
.col-sm-5, .col-md-5,
.col-sm-6, .col-md-6,
.col-sm-7, .col-md-7,
.col-sm-8, .col-md-8,
.col-sm-9, .col-md-9,
.col-sm-10, .col-md-10,
.col-sm-11, .col-md-11,
.col-sm-12, .col-md-12,
.col, .col-sm, .col-md {
border: 2px solid lightpink;
padding: 8px;
/* margin: 1px; */
}HTML
<div class="container">
<h5>TEST1</h5>
<div class="row">
<div class="col-sm-12">col-sm-12</div>
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
</div>
<br>
<h5>TEST2</h5>
<div class="row">
<div class="col-sm-12">col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-2">col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-1">col-sm-1</div>
</div>
<br>
<h5>TEST3</h5>
<div class="row">
<div class="col-sm-1">col-sm-1</div>
<div class="col-sm-11">col-sm-11</div>
</div>
<div class="row">
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-10">col-sm-10</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-9">col-sm-9</div>
</div>
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-8">col-sm-8</div>
</div>
<div class="row">
<div class="col-sm-5">col-sm-5</div>
<div class="col-sm-7">col-sm-7</div>
</div>
<div class="row">
<div class="col-sm-11">col-sm-11</div>
<div class="col-sm-1">col-sm-1</div>
</div>
</div>