col classes
The col classes set the width of a column, or let it share the space equally.
In this page:
Syntax
<div class="row">
<div class="col">equal</div>
<div class="col-6">half</div>
<div class="col-auto">content width</div>
</div>col classes
.col shares the space equally, .col-{n} sets a fixed share of twelve, and .col-auto sizes to its content. Breakpoint versions like .col-sm-6 apply from that size up. Mixing .col with .col-{n} lets the plain columns fill what remains.
Note:
.col-auto is perfect for buttons and labels next to flexible columns.
Example: col classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container text-center">
<div class="row mb-2"><div class="col bg-light border">col</div><div class="col-6 bg-warning-subtle border">col-6</div><div class="col bg-light border">col</div></div>
<div class="row"><div class="col-auto bg-info-subtle border">col-auto</div><div class="col bg-light border">col fills the rest</div></div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Mixing up col and col-auto
- Using class col-md without a base size on small screens
- Adding both col and col-6 to the same element
Chapter Summary
- .col is equal share
- .col-n is n of 12
- .col-auto fits content
- Breakpoints use col-md-n
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: