×
Night mode
Sign up
Login
Results: 1578
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
Setting one column width
The column in the middle has specified width and the rest of the space is divided equally for the other columns
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
0
5 grid breakpoints
There are five grid breakpoints to make the grid responsive: Extra small - 
xs
Small - 
sm
Medium - 
md
Large - 
lg
Extra large - 
xl
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
1
.no-gutters 
.no-gutters
on the 
.row
removes padding from columns
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
2
three equal width columns on all devices and viewport
Two columns with equal width on all devices and viewport (from 
xs
to 
xl
)
<div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
Three equal width columns
<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
0
three columns only on large device 
<div class="row">
    <div class="col-lg">
    One of three columns
    </div>
    <div class="col-lg">
        One of three columns
    </div>
    <div class="col-lg">
        One of three columns
    </div>
</div>
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
1
grid column numbers
Number of columns in bootstrap grid system is 
12
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
1
three equal-width columns
Creates three equal-width columns on small, medium, large, and extra large devices
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap official doc
1
container class 
.container
class sets a max-width at each responsive breakpoint
by Valeri Tandilashvili
5 years ago
0
Bootstrap
layout
Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)
0
button with different sizes
Large buttons with class 
btn-lg
<button type="button" class="btn btn-primary btn-lg">Large primary</button>
<button type="button" class="btn btn-secondary btn-lg">Large secondary</button>
Medium buttons with no special class because it's default
<button type="button" class="btn btn-primary">Default primary</button>
    <button type="button" class="btn btn-secondary">Default secondary</button>
Small buttons with class 
btn-sm
<button type="button" class="btn btn-primary">Small primary</button>
    <button type="button" class="btn btn-secondary btn-sm">Small secondary</button>
by Valeri Tandilashvili
5 years ago
0
Bootstrap
buttons
Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)
1
button types (outline)
Outlined button types with examples
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Outline button Classes: 
btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-danger
btn-outline-warning
btn-outline-info
btn-outline-light
btn-outline-dark
by Valeri Tandilashvili
5 years ago
0
Bootstrap
buttons
Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)
1
Results: 1578