Category «Bootstrap»

Bootstrap JS Collapse

JS Collapse (collapse.js) Get base styles and flexible support for collapsible components like accordions and navigation. Plugin dependency: Collapse requires the transitions plugin to be included in your version of Bootstrap. For a tutorial about Collapsibles, read our Bootstrap Collapse Tutorial. The Collapse Plugin Classes Class Description Example .collapse Hides the content .collapse in Shows …

Bootstrap CSS Helper Classes Reference

Text Add meaning through text-colors with the classes below. Links will darken on hover: Class Description Example .text-muted Text styled with class “text-muted” .text-primary Text styled with class “text-primary” .text-success Text styled with class “text-success” .text-info Text styled with class “text-info” .text-warning Text styled with class “text-warning” .text-danger Text styled with class “text-danger” Background Add …

Bootstrap JS Dropdown

JS Dropdown (dropdown.js) A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list. For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial. The Dropdown Plugin Classes Class Description Example .dropdown Indicates a dropdown menu .dropdown-menu-right Right-aligns a dropdown menu .dropdown-header Adds a header inside the …

Bootstrap CSS Images Reference

Bootstrap Images Rounded Corners: Circle: Thumbnail: <img> Classes The classes below can be used to style any image: Class Description Example .img-rounded Adds rounded corners to an image (not available in IE8) .img-circle Shapes the image to a circle (not available in IE8) .img-thumbnail Shapes the image to a thumbnail .img-responsive Makes an image responsive …

Bootstrap JS Modal

JS Modal (modal.js) The Modal plugin is a dialog box/popup window that is displayed on top of the current page. For a tutorial about Modals, read our Bootstrap Modal Tutorial. The Modal Plugin Classes Class Description .modal Creates a modal .modal-content Styles the modal properly with border, background-color, etc. Use this class to add the …

Bootstrap CSS Tables Reference

<table> Classes Use the classes below to style any table: Class Description Example .table Adds basic styling (light padding and only horizontal dividers) to any <table> .table-striped Adds zebra-striping to any table row within <tbody> (not available in IE8) .table-bordered Adds border on all sides of the table and cells .table-hover Enables a hover state …

Bootstrap JS Popover

JS Popover (popover.js) The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap. For a tutorial about …

Bootstrap Dropdown Components

Dropdowns For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial. Class Description Example .dropdown Indicates a dropdown menu .dropdown-menu Builds the dropdown menu .dropdown-menu-right Right-aligns a dropdown menu .dropdown-header Adds a header inside the dropdown menu .dropup Indicates a dropup menu .disabled Disables an item in the dropdown menu .divider Separates items inside the …

Bootstrap JS Scrollspy

JS Scrollspy (scrollspy.js) The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position. For a tutorial about Scrollspy, read our Bootstrap Scrollspy Tutorial. Tip: The Scrollspy plugin is often used together with the Affix plugin. Via data-* Attributes Add data-spy=”scroll” to the element that should be used as …

Bootstrap Navigation Components

Tabs and Pills Class Description Example .nav nav-tabs Creates navigation tabs .nav nav-pills Creates navigation pills .nav nav-pills nav-stacked Creates vertical navigation pills .nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked .disabled Indicates a disabled (unclickable) tab/pill Navigation tabs with dropdown …