Category «Bootstrap»

Bootstrap Form Inputs

Supported Form Controls Bootstrap supports the following form controls: input textarea checkbox radio select Bootstrap Input Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Note: Inputs will NOT be fully styled if their type is not properly declared! Name: Password: The …

Bootstrap CSS Typography Reference

Bootstrap’s Default Settings Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default). Typography The elements below are HTML elements that will be styled a little bit …

Bootstrap CSS Buttons Reference

Button Colors Default Primary Success Info Warning Danger Link Button Sizes Large Small XSmall Active/Disabled Buttons Info Button Active Info Button Disabled Info Button Block-level Button Block-level Button Button Classes The classes below can be used to style any <a>, <button>, or <input> element: Class Description Example .btn Adds basic styling to any button .btn-default …

Bootstrap JS Carousel

JS Carousel (carousel.js) The Carousel plugin is a component for cycling through elements, like a carousel (slideshow). For a tutorial about Carousels, read our Bootstrap Carousel Tutorial. Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect). The Carousel Plugin Classes …

Bootstrap CSS Forms Reference

Bootstrap’s Default Settings Individual form controls automatically receive some global styling with Bootstrap. All textual <input>, <textarea>, and <select> elements with class=”form-control” are set to width: 100%; by default. Standard rules for all three form layouts: Wrap labels and form controls in <div class=”form-group”> (needed for optimum spacing) Add class .form-control to all textual <input>, …

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 …