Category «Bootstrap»

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 …

Bootstrap JS Tab

JS Tab (tab.js) Tabs are used to separate content into different panes where each pane is viewable one at a time. For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial. The Tab Plugin Classes Class Description Example .nav nav-tabs Creates navigation tabs .nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider …

Bootstrap Glyphicon Components

Glyphicons Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back toGlyphicons whenever possible. Use glyphicons in text, buttons, toolbars, navigation, or forms: Bootstrap Glyph Example …

Bootstrap Quiz

You can test your Bootstrap skills with W3Schools’ Quiz. The Test The test contains 25 questions and there is no time limit. The test is not official, it’s just a nice way to see how much you know, or don’t know, about Bootstrap. Count Your Score You will get 1 point for each correct answer. …

Bootstrap JS Affix

JS Affix (affix.js) The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them “stick” at a specific area while scrolling up and down the page. The plugin toggles this behavior on and off (changes the …