DEV Community

Lam
Lam

Posted on

Bootstrap Cheat Sheet

#bootstrap #cheatsheet

Input groups 

.input-group
    input.form-control(type='text')
    .input-group-addon years
Enter fullscreen mode Exit fullscreen mode

Tooltip 

<span
  data-toggle='tooltip'
  title='tooltip'
  data-placement='left|top|bottom|right'>
Enter fullscreen mode Exit fullscreen mode 
$(function () {
  $('[data-toogle~="tooltip"]').tooltip()
})
Enter fullscreen mode Exit fullscreen mode

Modal via ajax (Rails) 

%button.btn{data: { |
  toggle: 'modal', |
  target: '#chooseTheme', |
  remote: '/path/to/remote'}
  Change Theme
Enter fullscreen mode Exit fullscreen mode 
.modal.fade#chooseTheme
  .modal-dialog.modal-xl
    .modal-content
      .modal-header
        %h4.modal-title Choose a theme

      .modal-body
        .spinner-panel.-lg
          %i
Enter fullscreen mode Exit fullscreen mode

Modal 

<a data-toggle='modal' data-target='#new'>
Enter fullscreen mode Exit fullscreen mode 
#new.modal.fade(role='dialog')
  .modal-dialog // .modal-lg, .modal-sm
    .modal-content
      .modal-header
        %h4.modal-title hello
        %button.close{type: 'button', data: { dismiss: 'modal' }}
          %span{'aria-hidden' => true}!= "&times;"
          %span.sr-only Close
      .modal-body
        ...
      .modal-footer
        ...
Enter fullscreen mode Exit fullscreen mode

Utilities 

.pull-left
.pull-right
Enter fullscreen mode Exit fullscreen mode 
.hidden-{xs,sm,md,lg}
.visible-{xs,sm,md,lg}
.visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
Enter fullscreen mode Exit fullscreen mode 
.center-block  /* margin: auto */
.clearfix
.text-{center,left,right,justify,nowrap}
.text-{lowercase,uppercase,capitalize}
Enter fullscreen mode Exit fullscreen mode 
.show
.hidden
Enter fullscreen mode Exit fullscreen mode

Columns 

.container
.container-fluid
Enter fullscreen mode Exit fullscreen mode 
.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-md-offset-1
Enter fullscreen mode Exit fullscreen mode

Mixins:

@include make-xs-column(12);
@include make-sm-column(6);
@include make-md-column(3);
@include make-lg-column(3);
Enter fullscreen mode Exit fullscreen mode 
@include make-sm-column-offset(1);
@include make-sm-column-push(1);
@include make-sm-column-pull(1);
Enter fullscreen mode Exit fullscreen mode

Screen sizes 

         768          992                1200
'     '     '     '     '     '     '     '     '
<---------^------------^------------------^--------->
     xs         sm              md             lg
   (phone)   (tablet)        (laptop)       (desktop)
Enter fullscreen mode Exit fullscreen mode

Min:

@media (min-width: @screen-sm-min) // >= 768px (small tablet)
@media (min-width: @screen-md-min) // >= 992px (medium laptop)
@media (min-width: @screen-lg-min) // >= 1200px (large desktop)
Enter fullscreen mode Exit fullscreen mode

Max:

@media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
@media (max-width: @screen-sm-max) { // < 992px (small tablet)
@media (max-width: @screen-md-max) { // < 1200px (medium laptop)
Enter fullscreen mode Exit fullscreen mode

Reference

Top comments (0)

Read next

tutortacademy profile image

Code Review Best Practices

Tutort Academy -

manuelarte profile image

Simplify Your REST API Responses with Milogo for Gin-Gonic

Manuel Doncel Martos -

reubenwalker64 profile image

Symfony Station Communiqué — 15 November 2024. A look at Symfony, Drupal, PHP, and programming news!

Reuben Walker, Jr. -

novitzmann profile image

Latest DocWire SDK Release: Modern Features for C++ Developers

Krzysztof Nowicki -