Bootstrap 4 Class Referansı

Bootstrap 4 Class Referansı

 

Alerts

• alert-primary
• alert-secondary
• alert-success
• alert-info
• alert-warning
• alert-danger
• alert-light
• alert-dark
• alert-link
• alert-dismissible
• alert-heading

Badges

• badge
• badge-pill
• badge-primary
• badge-secondary
• badge-success
• badge-info
• badge-warning
• badge-danger
• badge-light
• badge-dark

Breadcrumbs

• breadcrumb

Buttons

• btn-primary
• btn-secondary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-light
• btn-dark
• btn-link
• btn-outline-primary
• btn-outline-secondary
• btn-outline-success
• btn-outline-info
• btn-outline-warning
• btn-outline-danger
• btn-outline-light
• btn-outline-dark

Button Groups

• btn-group
• btn-group-lg
• btn-group-sm
• btn-group-vertical
• btn-group (nested)
• btn-toolbar

Button Modifiers

• btn-lg
• btn-sm
• btn-block
• active button
• disabled button
• checkbox as button
• radio as button

Cards

• card
• card-body
• card-title
• card-subtitle
• card-text
• card-link
• card-img-top
• middle image
• card-img-bottom
• card-img-overlay
• list-group
• card-header
• h*.card-header
• card-footer
• card-group
• card-deck
• card-columns
• card bg-... text-...

Carousel

• carousel slide
• carousel-fade
• carousel-indicators
• carousel-caption

Collapse

• collapse
• accordion

Dropdowns

• dropdown
• dropdown (split)
• dropup
• dropup (split)
• dropright
• dropleft
• dropdown-header
• dropdown-item-text
• dropdown-divider
• dropdown-item disabled
• dropdown-menu-right

Forms

• form-group
• form-inline
• form using the grid
• form-control
• form-control-lg
• form-control-sm
• form-control-file
• form-control-plaintext
• form-control-range
• form-check
• form-check-inline
• disabled items
• readonly

Form Input Groups

• input-group
• input-group-prepend
• input-group-append
• input-group-sm
• input-group-lg
• checkbox
• radio
• dropdown
• segmented buttons

Custom Forms

• custom-checkbox
• custom-radio
• custom-switch
• custom-select
• custom-file
• custom-range

Grid

• container
• container-fluid
• row
• col-# ( <576px)
• col-sm-# ( ≥576px)
• col-md-# ( ≥768px)
• col-lg-# ( ≥992px)
• col-xl-# ( ≥1200px)
• col
• col-*
• no-gutters
• offset-*-#
• order-#
• nested columns

Images

• img-fluid
• img-thumbnail

Jumbotron

• jumbotron
• jumbotron-fluid

List Group

• list-group
• list-group-item active
• list-group-item disabled
• list-group-item-action
• list-group-item-primary
• list-group-item-secondary
• list-group-item-success
• list-group-item-info
• list-group-item-warning
• list-group-item-danger
• list-group-item-light
• list-group-item-dark
• list-group with badges
• list-group with d-flex

Media Objects

• media
• nested media
• d-flex align-self-start
• d-flex align-self-center
• d-flex align-self-end
• right aligned media

Modal

• modal
• modal-dialog-centered
• modal fade
• modal-lg
• modal-sm
• modal-xl

Navs

• ul.nav
• nav.nav
• nav justify-content-*
• nav flex-column
• nav-tabs
• nav-pills
• nav-fill
• nav-justified
• nav with flex utils
• nav-tabs with dropdown
• nav-pills with dropdown

Navbar

• navbar
• navbar-brand
• navbar with form
• navbar-text
• navbar-dark bg-dark
• navbar-light
• navbar fixed-top
• navbar fixed-bottom
• navbar sticky-top
• collapse navbar-collapse
• navbar-toggler
• navbar-expand-*

Pagination

• pagination
• page-item disabled
• page-item active
• pagination-lg
• pagination-sm

Popover

• popovers
• dismissible popover

Progress

• progress
• progress-bar
• progress-bar with label
• progress-bar with height
• progress-bar bg-*
• multiple progress-bar
• progress-bar-striped
• progress-bar-striped bg-*
• progress-bar-animated

Scrollspy

• data-spy

Spinner

• spinner-border
• spinner-border text-*
• spinner-border-sm
• spinner-grow
• spinner-grow text-*
• spinner-grow-sm

Tables

• table
• thead-light
• thead-dark
• table-striped
• table-bordered
• table-borderless
• table-hover
• table-sm
• table-*-responsive
• table-reflow
• table-active
• table-primary
• table-secondary
• table-success
• table-info
• table-warning
• table-danger
• table-light
• table-dark

Toasts

• toast

Tooltips

• tooltip

Typography

• display-# (1-4)
• lead
• blockquote
• blockquote-footer
• blockquote-reverse
• list-unstyled
• list-inline
• dl-horizontal

Utility: Borders

• border
• border-*-0
• border-primary
• border-secondary
• border-success
• border-danger
• border-warning
• border-info
• border-light
• border-dark
• border-white
• rounded
• rounded-circle
• rounded-0
• rounded-*

Utility: Colors

• bg-primary
• bg-secondary
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-light
• bg-dark
• bg-white
• text-primary
• text-secondary
• text-success
• text-info
• text-warning
• text-danger
• text-light
• text-dark
• text-white

Utility: Display

• d-*-block
• d-*-flex
• d-*-inline
• d-*-inline-block
• d-*-inline-flex
• d-*-none
• d-*-table
• d-*-table-cell
• d-print-...

Utility: Flexbox

• flex-*-column
• flex-*-column-reverse
• flex-*-row
• flex-*-row-reverse
• flex-*-nowrap
• flex-*-wrap
• flex-*-wrap-reverse
• flex-fill
• flex-*-grow-1
• flex-*-grow-0
• flex-*-shrink-1
• flex-*-shrink-0
• justify-content-*-start
• justify-content-*-end
• justify-content-*-center
• justify-content-*-between
• justify-content-*-around
• align-content-*-start
• align-content-*-end
• align-content-*-center
• align-content-*-around
• align-content-*-stretch
• align-items-*-start
• align-items-*-end
• align-items-*-center
• align-items-*-baseline
• align-items-*-stretch
• align-self-*-start
• align-self-*-end
• align-self-*-center
• align-self-*-baseline
• align-self-*-stretch
• order-*-#

Utility: Misc

• close
• embed-responsive
• shadow-none
• shadow-sm
• shadow
• shadow-lg
• invisible
• visible
• sr-only
• sr-only-focusable

Utility: Positioning

• align-*
• clearfix
• fixed-top
• fixed-bottom
• sticky-top
• float-*-left
• float-*-right
• float-*-none

Utility: Sizing

• w-100
• h-100
• mw-100
• mh-100

Utility: Spacing

• m-1 / m-*-#
• mt-1 / mt-*-#
• mr-1 / mr-*-#
• mb-1 / mb-*-#
• ml-1 / ml-*-#
• mx-1 / mx-*-#
• my-1 / my-*-#
• m-n1 / m-*-n#
• p-1 / p-*-#
• pt-1 / pt-*-#
• pr-1 / pr-*-#
• pb-1 / pb-*-#
• pl-1 / pl-*-#
• px-1 / px-*-#
• py-1 / py-*-#

Utility: Text

• font-weight-bold
• font-weight-bolder
• font-weight-light
• font-weight-lighter
• font-weight-normal
• text-decoration-none
• font-italic
• text-monospace
• text-justify
• text-nowrap
• text-*-left
• text-*-right
• text-*-center
• text-lowercase
• text-uppercase
• text-capitalize
• text-truncate
• text-body
• text-black-50
• text-white-50
• text-muted
• text-hide