×
Clear all filters including search bar
Valeri Tandilashvili's Bootstrap Notes
Results: 27
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>
grid column numbers
Number of columns in bootstrap grid system is 
12
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>
breadcrumb separator
We can remove or change the breadcrumb separator by assigning different value to 
$breadcrumb-divider: none;
sass variable. We can even assign SVG icon using the following syntax
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
If we want to remove the separator, we assign 
none
to the variable
$breadcrumb-divider: none;
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>
container class 
.container
class sets a max-width at each responsive breakpoint
button types
Button types with html examples
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Special classes for different button types: 
btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
Results: 27