Bootstrap Practice Examples

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Bootstrap 3 Examples

This section contains a whole bunch of examples demonstrating the various Bootstrap components and its features in real action.

Bootstrap Grid System

  • Bootstrap one column grid layout for all devices

  • Bootstrap two column grid layouts for all devices

  • Bootstrap two column grid layouts for tablets and desktops

  • Bootstrap two column grid layouts for tablets in landscape mode and desktops

  • Bootstrap three column grid layouts for all devices

  • Bootstrap three column grid for layouts tablets and desktops

  • Bootstrap three column grid layouts for tablets in landscape mode and desktops

  • Bootstrap four column convertible grid layout with multiple views - 4 columns on desktops, 2 columns on tablets, one column on mobiles

  • Bootstrap nested grid columns layout

  • Bootstrap multi column grid layout for all devices

  • Bootstrap fixed layout

  • Bootstrap fluid layout

  • Bootstrap responsive layout

Bootstrap Typography

  • Bootstrap headings

  • Bootstrap headings with secondary text

  • Bootstrap page header

  • Bootstrap paragraph

  • Bootstrap text formatting

  • Bootstrap text alignment

  • Bootstrap text transformation

  • Bootstrap text emphasis classes

  • Formatting blockquotes in Bootstrap

  • Bootstrap blockquotes right aligned

Bootstrap Tables

  • Creating tables with Bootstrap

  • Bootstrap table with alternate background

  • Bootstrap table with borders

  • Enable hover state on table rows

  • Bootstrap condensed tables

  • Optional emphasis classes for table rows

  • Bootstrap responsive tables

Bootstrap Lists

  • Creating lists with Bootstrap

  • Bootstrap unstyled ordered and unordered list

  • Placing ordered and unordered list items inline

  • Creating horizontal definition lists with Bootstrap

  • Bootstrap list groups

  • Bootstrap list group with linked items

  • Bootstrap linked list group with custom content

  • Bootstrap list groups with emphasis classes

  • Bootstrap linked list groups with emphasis classes

Bootstrap Forms

  • Creating vertical form with Bootstrap

  • Creating horizontal form with Bootstrap

  • Creating inline form with Bootstrap

  • Bootstrap static form control

  • Height sizing of Inputs and select boxes with Bootstrap

  • Grid sizing of form controls with Bootstrap

  • Creating prepended and appended inputs with Bootstrap

  • Creating button dropdowns with Bootstrap

  • Creating segmented dropdown button groups with Bootstrap

  • Creating disabled inputs with Bootstrap

  • Creating readonly inputs with Bootstrap

  • Creating disabled fieldsets with Bootstrap

  • Placing help text around form controls

  • Bootstrap form validation states

  • Bootstrap form validation states with feedback icons

  • Supported form controls in Bootstrap

Bootstrap Images

  • Making thumbnails, rounded corner and circular images with Bootstrap

  • Making responsive images with Bootstrap

  • Making responsive videos with Bootstrap

  • Creating thumbnails gallery with Bootstrap

  • Creating thumbnails gallery with content with Bootstrap

  • Bootstrap media objects

  • Bootstrap media list

Bootstrap Icons

  • Using Bootstrap icons inside buttons

  • Using Bootstrap icons inside dropdowns

  • Using Bootstrap icons inside extended form controls

  • Using Bootstrap icons inside nav components

Bootstrap Navs

  • Creating basic tabs with Bootstrap

  • Creating basic pills nav with Bootstrap

  • Creating stacked pills nav with Bootstrap

  • Bootstrap tabs with dropdown menus

  • Bootstrap pills with dropdown menus

  • Creating justified tabs and pills with Bootstrap

  • Disable links inside Bootstrap navs

Bootstrap Navbar

  • Creating navbar with Bootstrap

  • Bootstrap navbar with dropdown and search form

  • Creating Bootstrap navbar fixed to top

  • Creating Bootstrap navbar fixed to bottom

  • Creating static top navbar with Bootstrap

  • Bootstrap navbar with search form

  • Creating inverted variation of responsive navbar with Bootstrap

Bootstrap Breadcrumbs and Pagination

  • Creating breadcrumbs with Bootstrap

  • Creating pagination with Bootstrap

  • Bootstrap pagination with disabled and active states

  • Changing the sizes of Bootstrap pagination

  • Creating pager with Bootstrap

  • Side alignment of Bootstrap pager

Bootstrap Labels and Badges

  • Creating inline labels with Bootstrap

  • Bootstrap inline labels with emphasis classes

  • Creating inline badges with Bootstrap

Bootstrap Progress Bars

  • Creating progress bars with Bootstrap

  • Creating Bootstrap progress bar with label

  • Creating stripped progress bars with Bootstrap

  • Creating animated progress bars with Bootstrap

  • Creating stacked progress bars with Bootstrap

  • Bootstrap progress bars with emphasis classes

  • Bootstrap striped progress bars with emphasis classes

Bootstrap Utility Components and Classes

  • Bootstrap jumbotron

  • Bootstrap wells

  • Bootstrap contextual background classes

  • Bootstrap close icon

  • Bootstrap caret icon for dropdowns

  • Bootstrap center alignment of content block

  • Bootstrap show hide content

  • Bootstrap .sr-only helper class

  • Bootstrap .text-hide helper class

  • Bootstrap .pull-left helper class

  • Bootstrap .pull-right helper class

  • Bootstrap .clearfix helper class

Bootstrap Buttons

  • Available buttons styles in Bootstrap

  • Changing the sizes of Bootstrap buttons

  • Creating block level buttons with Bootstrap

  • Creating disabled Bootstrap buttons using the anchor element

  • Creating disabled Bootstrap buttons using the input and button element

  • Creating stateful buttons with Bootstrap

  • Creating single toggle button with Bootstrap

  • Creating button groups with Bootstrap

  • Creating buttons checkbox with Bootstrap

  • Bootstrap buttons checkbox with pre checked options

  • Creating buttons radio with Bootstrap

  • Bootstrap buttons radio with pre selected option

  • Bootstrap button toolbar

  • Height sizing of Bootstrap button groups

  • Creating justified button groups with Bootstrap

  • Enable Bootstrap buttons via JavaScript

  • Bootstrap $().button('toggle') method

  • Bootstrap $().button('loading') method

  • Bootstrap $().button('reset') method

  • Bootstrap $().button(string) method

Bootstrap Dropdowns

  • Adding dropdowns to Bootstrap navbar

  • Adding dropdowns to Bootstrap navs

  • Adding dropdowns to Bootstrap buttons

  • Adding dropdowns to split buttons

  • Adding dropdowns to button groups

  • Adding dropdowns to any element via data attributes

  • Adding dropdowns to any element via JavaScript

  • Bootstrap $().dropdown('toggle') method

 

Bootstrap Tooltips

  • Creating tooltips with Bootstrap

  • Setting the position of Bootstrap tooltips via data attributes

  • Setting the position of Bootstrap tooltips via JavaScript

  • Setting the title text of Bootstrap tooltips via JavaScript

  • Inserting HTML content inside the Bootstrap tooltips via JavaScript

  • Setting the show hide timing of Bootstrap tooltips via JavaScript

  • Creating the custom template for Bootstrap tooltips via JavaScript

  • Setting the container element for Bootstrap tooltips via JavaScript

  • Bootstrap $().tooltip(options) method

  • Bootstrap .tooltip('show') method

  • Bootstrap .tooltip('hide') method

  • Bootstrap .tooltip('toggle') method

  • Bootstrap .tooltip('destroy') method

Bootstrap Popovers

  • Creating popovers with Bootstrap

  • Setting the position of Bootstrap popovers via data attributes

  • Setting the position of Bootstrap popovers via JavaScript

  • Setting the title text of Bootstrap popovers via JavaScript

  • Triggering the Bootstrap popovers on mouse hover instead of click via JavaScript

  • Inserting HTML content inside the Bootstrap popovers via JavaScript

  • Setting the show hide timing of Bootstrap popovers via JavaScript

  • Creating the custom template for Bootstrap popovers via JavaScript

  • Setting the container element for Bootstrap popovers via JavaScript

  • Bootstrap $().popover(options) method

  • Bootstrap .popover('show') method

  • Bootstrap .popover('hide') method

  • Bootstrap .popover('toggle') method

  • Bootstrap .popover('destroy') method

Bootstrap Alerts Messages

  • Creating alert messages with Bootstrap

  • Creating error or danger alert messages with Bootstrap

  • Creating success or confirmation alert messages with Bootstrap

  • Creating information alert messages with Bootstrap

  • Closing Bootstrap alert messages via data attributes

  • Closing Bootstrap alert messages via JavaScript

  • Bootstrap $().alert() method

  • Bootstrap $().alert('close') method

  • Display a message when Bootstrap alert box has been completely closed

Bootstrap Tabs

  • Creating a basic tab component with Bootstrap

  • Creating Bootstrap dynamic tabs via data attributes

  • Creating Bootstrap dynamic tabs via via JavaScript

  • Activate individual Bootstrap tabs via JavaScript

  • Setting the directions of Bootstrap tabs

  • Bootstrap $().tab method

  • Display the names of active tab and previous tab

Bootstrap Modals

  • Creating modals with Bootstrap

  • Launching Bootstrap modal box via data attributes

  • Launching Bootstrap modal box via JavaScript

  • Changing the sizes Bootstrap modals

  • Changing the Bootstrap modal content based on the trigger button

  • Prevent Bootstrap modal from disappearing on click of the dark area via JavaScript

  • Prevent Bootstrap modal from hiding on press of the escape key via JavaScript

  • Loading content in Bootstrap modals via remote URL via data attributes

  • Loading content in Bootstrap modals via remote URL via JavaScript

  • Bootstrap .modal(options) method

  • Bootstrap .modal('toggle') method

  • Bootstrap .modal('show') method

  • Bootstrap .modal('hide') method

  • Display a message when Bootstrap modal window has been completely closed

Bootstrap Accordion

  • Creating accordion widget with Bootstrap

  • Expanding and collapsing elements via data attributes

  • Expanding and collapsing elements via JavaScript

  • Bootstrap .collapse(options) method

  • Bootstrap .collapse('toggle') method

  • Bootstrap .collapse('show') method

  • Bootstrap .collapse('hide') method

  • Display an alert message when collapsible element has been completely closed

Bootstrap Carousel

  • Creating carousel with Bootstrap

  • Activate Bootstrap carousels via data attributes

  • Activate Bootstrap carousels via JavaScript

  • Removing auto-sliding from Bootstrap carousel

  • Setting options to Bootstrap carousel() method

  • Bootstrap .carousel(options) method

  • Bootstrap .carousel('cycle') method

  • Bootstrap .carousel(number) method

  • Bootstrap .carousel('prev') method

  • Bootstrap .carousel('next') method

  • Display an alert message when sliding transition of a Bootstrap carousel item has been fully completed

Bootstrap Typeahead

  • Creating Twitter typeahead with local dataset

  • Creating Twitter typeahead with external dataset

Bootstrap ScrollSpy

  • Creating scrollspy with Bootstrap

  • Adding scrollspy behavior to the navbar via data attributes

  • Adding scrollspy behavior to the navbar via JavaScript

  • Bootstrap .scrollspy('refresh') method

  • Display the name of menu items when it is highlighted by the scrollspy

  • Enable smooth scrolling in Bootstrap scrollspy via JavaScript

Bootstrap Affix

  • Adding Bootstrap affix behavior to the element via data attributes

  • Adding Bootstrap affix behavior to the element via JavaScript

  • Display an alert message when navigation menu has been affixed