Bootstrap Grid
Bootstrap’s grid system allows up to 12 columns across the page.If you do not want to use all 12 column individually, you can group the columns together to create wider columns.Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.
Grid Classes
The Bootstrap grid system has five classes:
.col-(extra small devices – screen width less than 576px).col-sm-(small devices – screen width equal to or greater than 576px).col-md-(medium devices – screen width equal to or greater than 768px).col-lg-(large devices – screen width equal to or greater than 992px).col-xl-(xlarge devices – screen width equal to or greater than 1200px)
Grid System Rules
Some Bootstrap grid system rules:
- Rows must be placed within a
.container(fixed-width) or.container-fluid(full-width) for proper alignment and padding - Use rows to create horizontal groups of columns.
- Content should be placed within columns.
- Predefined classes like
.rowand.col-sm-4are available for quickly making grid layouts - Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
.rows - Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three
.col-sm-4 - Column widths are in percentage, so they are always fluid and sized relative to their parent element
<!doctype html>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.wrapper {
display: flex;
}
.wrapper > div {
font-size: 4vh;
color: black;
background: orange;
margin: .1em;
padding: .3em;
border-radius: 3px;
flex: 1;
}
</style>
<div class="wrapper">
<div>1</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
Leave a Reply