Bootstrap 4

<!
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
w3schools.com
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARW3.CSSXML
MORE EXAMPLES REFERENCES
BS HOMEBS Get StartedBS Grid BasicBS TypographyBS TablesBS ImagesBS JumbotronBS
WellsBS AlertsBS ButtonsBS Button GroupsBS GlyphiconsBS Badges/LabelsBS Progress
BarsBS PaginationBS PagerBS List GroupsBS PanelsBS DropdownsBS CollapseBS Tabs/PillsBS
NavbarBS FormsBS InputsBS Inputs 2BS Input SizingBS Media ObjectsBS CarouselBS
ModalBS TooltipBS PopoverBS ScrollspyBS AffixBS FiltersBS Grid SystemBS
Stacked/HorizontalBS Grid SmallBS Grid MediumBS Grid LargeBS Grid ExamplesBS
TemplatesBS Theme "Simply Me"BS Theme "Company"BS Theme "Band"BS ExamplesBS
QuizBS CertificateCSS All ClassesCSS TypographyCSS ButtonsCSS FormsCSS HelpersCSS
ImagesCSS TablesCSS DropdownsCSS NavsGlyphiconsJS AffixJS AlertJS ButtonJS CarouselJS
CollapseJS DropdownJS ModalJS PopoverJS ScrollspyJS TabJS
Bootstrap Glyphicon Components

Tooltip
Previous Next
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 to Glyphicons whenever possible.
Use glyphicons in text, buttons, toolbars, navigation, or forms:
Bootstrap Glyph Example

<p>Envelope icon: <span class="glyphicon glyphicon-
envelope"></span></p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
Try it Yourself
Available Glyphs
Glyph Description
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-minus
glyphicon glyphicon-euro
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-heart
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-gift
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-saved
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-yen
glyphicon glyphicon-ruble
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-oil
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Previous Next
COLOR PICKER
HOW TO
Tabs
Dropdowns
Accordions
Convert Weights
Animated Buttons
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List
SHARE
CERTIFICATES
HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML.
Read More
REPORT ERROR
PRINT PAGE
FORUM
ABOUT
Top 10 Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
SQL Tutorial
PHP Tutorial
jQuery Tutorial
Angular Tutorial
XML Tutorial
Top 10 References
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Browser Statistics
PHP Reference
HTML Colors
HTML Character Sets
jQuery Reference
AngularJS Reference
Top 10 Examples
HTML Examples
CSS Examples
JavaScript Examples
W3.CSS Examples
HTML DOM Examples
PHP Examples
ASP Examples
jQuery Examples
Angular Examples
XML Examples
Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate
W3Schools is optimized for learning, testing, and training. Examples might be

simplified to improve reading and basic understanding. Tutorials, references,
and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness of all content. While using this site, you agree to have read and
accepted our terms of use, cookie and privacy policy. Copyright 1999-2017 by
Refsnes Data. All Rights Reserved.
Powered by W3.CSS.
.active Adds a grey background color to the table row (<tr> or table cell (<td>) (same color
.active Adds a gray background color to the active link in a default navbar. Adds a black bac
to the current link inside an inverted navbar.
.active Adds a blue background color to the active list item in a list group
.active Adds a blue background color to simulate a "pressed" button

.active Animates a striped progress bar
.active Adds a blue background color to the active dropdown item in a dropdown
.active Adds a blue background color to the active pagination link (to highlight the current p
.affix The Affix plugin allows an element to become affixed (locked/sticky) to an area on th
toggles position:fixed on and off
.alert Creates an alert message box
.alert-danger Red alert box. Indicates a dangerous or potentially negative action
.alert- Together with the .close class, this class is used to close the alert
dismissable
.alert-info Light-blue alert box. Indicates some information
.alert-link Used on links inside alerts to add matching colored links

.alert-success Green alert box. Indicates a successful or positive action
.alert-warning Yellow alert box. Indicates caution should be taken with this action
.badge Creates a circular badge (grey circle - often used as a numerical indicator)
.bg-danger Adds a red background color to an element. Represents danger or a negative action
.bg-info Adds a light-blue background color to an element. Represents some information
.bg-primary Adds a blue background color to an element. Represents something important
.bg-success Adds a green background color to an element. Indicates success or a positive action
.bg-warning Adds a yellow background color to an element. Represents a warning or a negative ac
.breadcrumb A pagination. Indicates the current page's location within a navigational hierarchy
.btn Creates a basic button (gray background and rounded corners)
.btn-block Creates a block level button that spans the entire width of the parent element
.btn-danger Red button. Indicates danger or a negative action
.btn-default Default button. White background and grey border
.btn-group Groups buttons together on a single line
.btn-group- Makes a group of buttons span the entire width of the screen
justified
.btn-group-lg Large button group (makes all buttons in a button group larger - increased font-size an
.btn-group-sm Small button group (makes all buttons in a button group smaller)
.btn-group-xs Extra small button group (makes all buttons in a button group extra small)
.btn-group- Makes a button group appear vertically stacked
vertical
.btn-info Light-blue button. Represents information
.btn-link Makes a button look like a link (get button behavior)
.btn-lg Large button
.btn-primary Blue button.
.btn-sm Small button
.btn-success Green button. Indicates success or a positive action
.btn-warning Yellow button. Represents warning or a negative action
.btn-xs Extra small button

.caption Adds a caption text inside a .thumbnail
.caret Creates a caret arrow icon , which indicates that the button is a dropdown
.carousel Creates a carousel (slideshow)
.carousel-caption Creates a caption text for each slide in the carousel
.carousel-control Container for next and previous links
.carousel- Adds little dots/indicators at the bottom of each slide (which indicates how many slide
indicators and which slide the user are currently viewing)
.carousel-inner Container for slide items
.center-block Centers any element (Sets an element to display:block with margin-right:auto a
.checkbox Container for checkboxes

.checkbox-inline Makes multiple checkboxes appear on the same line
.clearfix Clears floats
.close Indicates a close icon
.col-*-* Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small de
Medium devices Desktops (992px), Large devices Desktops (1200px). Column val
.col-*-offset-* Move columns to the right. These classes increase the left margin of a column by * co
.col-*-pull-* Changes the order of the grid columns
.col-*-push-* Changes the order of the grid columns
.collapse Indicates collapsible content - which can be hidden or shown on demand
.collapse in Show the collapsible content by default

.container Fixed width container with widths determined by screen sites. Equal margin on the lef
.container-fluid A container that spans the full width of the screen
.control-label Allows a label to be used for form validation
.danger Adds a red background to the table row (<tr> or table cell (<td>). Indicates a dangero
action
.disabled Disables a button (adds opacity and a "no-parking-sign" icon on hover)
.disabled Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on ho
.disabled Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parki
.disabled Disables a list item in a list group (cannot be clicked - adds a grey background color a
icon on hover)
.divider Used to separate links in the dropdown menu with a thin horizontal border
.dl-horizontal Lines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side. Starts o
when the browser window expands, it will line up side-by-side
.dropdown Creates a toggleable menu that allows the user to choose one value from a predefined
.dropdown-header Used to add headers inside the dropdown menu
.dropdown-menu Adds the default styles for the dropdown menu container
.dropdown-menu- Right-aligns a dropdown menu

right
.dropdown-toggle Used on the button that should hide and show (toggle) the dropdown menu
.dropup Indicates a dropup menu (upwards instead of downwards)
.embed-responsive Container for embedded content. Makes videos or slideshows scale properly on any d
.embed- Container for embedded content. Creates an 16:9 aspect ratio embedded content
responsive-16by9
.embed- Container for embedded content. Creates an 4:3 aspect ratio embedded content
responsive-4by3
.embed- Used inside .embed-responsive. Scales the video nicely to the parent element
responsive-item
.fade Adds a fading effect when closing an alert box
.form-control Used on input, textarea, and select elements to span the entire width of the page and m
.form-control- Form validation class

feedback
.form-control- Adds plain text next to a form label within a horizontal form
static
.form-group Container for form input and label
.form-inline Makes a <form> left-aligned with inline-block controls (This only applies to forms w
least 768px wide)
.form-horizontal Aligns labels and groups of form controls in a horizontal layout

.glyphicon Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halfling
.has-danger Adds a red color to the label and a red border to the input, as well as an error icon insi
with .has-feedback)
.has-feedback Adds feedback icons for inputs (checkmark, warning and error signs)
.has-success Adds a green color to the label and a green border to the input, as well as a checkmark
together with .has-feedback)
.has-warning Adds a yellow/orange color to the label and a yellow/orange border to the input, as we
inside the input (used together with .has-feedback)
.help-block A block of help text that breaks onto a new line and may extend beyond one line.
.hidden Forces an element to be hidden (display:none)
.hidden-* Hides content depending on screen size
.hide Deprecated. Use .hidden instead

.h1 - .h6 Makes an element look like a heading of the chosen class (h1-h6)
.icon-bar Used in the navbar to create a hamburger menu (three horizontal bars)
.icon-next Unicode icon (arrow pointing right), used in carousels. This is often replaced with a g
.icon-prev Unicode icon (arrow pointing left), used in carousels. This is often replaced with a gly
.img-circle Shapes an image to a circle (not supported in IE8 and earlier)
.img-responsive Makes an image responsive
.img-rounded Adds rounded corners to an image
.img-thumbnail Shapes an image to a thumbnail (borders)
.in Fades in tabs

.info Adds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a n
or action
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.input-group Container to enhance an input by adding an icon, text or a button in front or behind it
.input-group-lg Large input group
.input-group-sm Small input group
.input-group- Together with the .input-group class, this class makes it possible to add an icon or h
addon
field
.input-group-btn Together with the .input-group class, this class attaches a button next to an input. O
.input-lg Large input field
.input-sm Small input field

.invisible Makes an element invisible (visibility:hidden). Note: Even though the element is
space on the page
.item Class added to each carousel item. May be text or images
.jumbotron Creates a padded grey box with rounded corners that enlarges the font sizes of the tex
box for calling extra attention to some special content or information
.label Adds a grey rounded box to an element. Provides additional information about someth
.label-danger Red label
.label-info Light-blue label
.label-success Green label
.label-warning Yellow label
.lead Increase the font size and line height of a paragraph

.left Used to identify the left carousel control
.list-group Creates a bordered list group for <li> elements
.list-group-item Added to each <li> element in the list group
.list-group-item- Creates a list group heading (used on other elements besides <li>)
heading
.list-group-item- Used for item text inside the list group (used on other elements besides<li>)
text
.list-group-item- Red background color for a list item in a list group

danger
.list-group-item- Light-blue background color for a list item in a list group

info
.list-group-item- Green background color for a list item in a list group

success
.list-group-item- Yellow background color for a list item in a list group

warning
.list-inline Places all list items on a single line (horizontal menu)
.list-unstyled Removes all default list-style (bullets, left margin, etc.) styling from a <ul>or <ol> lis
.mark Highlights text: Highlighted text
.media Aligns media objects (like images or videos - often used for comments in a blog post
.media-body Text that should appear next to a media object
.media-heading Creates a heading inside the media object
.media-list Nested media lists
.media-object Indicates a media object (image or video)
.modal Identifies the content as a modal and brings focus to it

.modal-body Defines the style for the body of the modal. Add any HTML markup here (p, img, etc
.modal-content Styles the modal (border, background-color, etc). Inside this, add the modal's header,
.modal-dialog Sets the proper width and margin of the modal
.modal-footer The footer of the modal (often contains an action button and a close button)
.modal-header The header of the modal (often contains a title and a close button)
.modal-lg Large modal (wider than default)
.modal-open Used on the <body> element to prevent page scrolling (overflow:hidden)
.modal-sm Small modal (less width)
.modal-title The title of the modal

.nav nav-tabs Indicates a tabbed menu
.nav nav-pills Indicates a pill menu
.nav .navbar-nav Used on a <ul> container that contains the list items with links inside a navigation bar
.nav-justified Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (cont
.nav-stacked Vertically stack tabs or pills
.nav-tabs Creates a tabbed menu
.navbar Creates a navigation bar
.navbar-brand Added to a link or a header element inside the navbar to represent a logo or a header
.navbar-btn Vertically aligns a button inside a navbar

.navbar-collapse Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile ph
.navbar-default Creates a default navigation bar (light-grey background color)
.navbar-fixed- Makes the navbar stay at the bottom of the screen (sticky/fixed)
bottom
.navbar-fixed-top Makes the navbar stay at the top of the screen (sticky/fixed)
.navbar-form Added to form elements inside the navbar to vertically center them (proper padding)
.navbar-header Added to a container element that contains the link/element that represent a logo or a
.navbar-inverse Creates a black navigation bar (instead of light-grey)
.navbar-left Aligns nav links, forms, buttons, or text, in the navbar to the left
.navbar-link Styles an element to look like a link inside the navbar (anchors get proper padding and
while other elements like p or span gets a default hover effect - white color in an inve
color in a default navbar)
.navbar-nav Used on a <ul> container that contains the list items with links inside a navigation bar
.navbar-right Aligns nav links, forms, buttons, or text in the navbar to the right.
.navbar-static- Removes left, top and right borders (rounded corners) from the navbar (default navbar
top 4px border-radius by default)
.navbar-text Vertical align any elements inside the navbar that are not links (ensures proper paddin
.navbar-toggle Styles the button that should open the navbar on small screens. Often used together w
to indicate a toggleable menu icon (hamburger/bars)
.next Used in the carousel control to identity the next control
.next Used to align pager buttons to the right side of the page (next button)
.page-header Adds a horizontal line under the heading (+ adds some extra space around the elemen
.pager Creates previous/next buttons (used on <ul> elements)

.pagination Creates a pagination (Useful when you have a web site with lots of pages. Used on <u
.pagination-lg Large pagination (each pagination link gets a font-size of 18px. Default is 14px)
.pagination-sm Small pagination (each pagination link gets a font-size of 12px. Default is 14px)
.panel Creates a bordered box with some padding around its content
.panel-body Container for content inside the panel
.panel-collapse Collapsible panel (toggle between hiding and showing panel(s))
.panel-danger Red panel. Indicates danger
.panel-info Light-blue panel. Indicates information
.panel-success Green panel. Indicates success

.panel-warning Yellow panel. Indicates warning
.panel-footer Creates a panel footer (light background color)
.panel-group Used to group many panels together. This removes the bottom margin below each pan
.panel-heading Creates a panel header (light background color)
.panel-title Used inside a .panel-heading to adjust the styling of the text (removes margins and
.popover Popup-box that appears when the user clicks on an element
.pre-scrollable Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollb
.prev Used in carousels to indicate a "previous" link
.previous Used to align pager buttons to the left side of the page (previous button)
.progress Container for progress bars
.progress-bar Creates a progress bar
.progress-bar- Red progress bar. Indicates danger

danger
.progress-bar- Light-blue progress bar. Indicates information

info
.progress-bar- Creates a striped progress bar

striped
.progress-bar- Green progress bar. Indicates success

success
.progress-bar- Yellow progress bar. Indicates warning

warning
.pull-left Float an element to the left
.pull-right Float an element to the right

.right Used to identify the right carousel control
.row Container for responsive columns
.show Shows an element (display:block)
.small Creates a lighter, secondary text in any heading
.sr-only Hides an element on all devices except for screen readers
.sr-only- Hides an element on all devices except for screen readers

focusable
.success Adds a green background color to a table row (<tr> or table cell (<td>). Indicates suc
.tab-content Used together with .tab-pane to creates toggleable/dynamic tabs/pills
.tab-pane Used together with .tab-content to creates toggleable/dynamic tabs/pills

.table Adds basic styling to a table (padding, bottom borders, etc)
.table-bordered Adds borders on all sides of the table and cells
.table-condensed Makes a table more compact by cutting cell padding in half
.table-hover Creates a hoverable table (adds a grey background color on table rows on hover)
.table-responsive Makes a table responsive (adds a horizontal scrollbar when needed)
.text-capitalize Indicates capitalized text
.text-center Center-aligns text
.text-danger Red text color. Indicates danger
.text-hide Hides text (helps replace an element's text content with a background image)
.text-info Light-blue text color. Indicates information
.text-justify Indicates justified text
.text-left Aligns the text to the left
.text-lowercase Changes text to lowercase
.text-muted Grey text color
.text-nowrap Prevents the text from wrapping
.text-primary Blue text color
.text-right Aligns text to the right
.text-success Green text color. Indicates success

.text-uppercase Makes text uppercase
.text-warning Yellow/orange text color. Indicates warning
.thumbnail Adds a border around an element (often images or videos) to make it look like a thum
.tooltip Popup-box that appears when the user moves the mouse pointer over an element
.visible-* Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hid
.visible-print- Displays the element (display:block) in print (pre)view

block
.visible-print- Displays the element (display:inline) in print (pre)view

inline
.visible-print- Displays the element (display:inline-block) in print (pre)view

inline-block
.hidden-print Hides the element (display:none) in print (pre)view

.warning Adds a yellow background color to the table row (<tr> or table cell (<td>). Indicates
.well Adds a rounded border around an element with a gray background color and some pad
.well-lg Large well (more padding)
.well-sm Small well (less padding)
Previous Next
COLOR PICKER
HOW TO
Tabs
Dropdowns
Accordions
Convert Weights
Animated Buttons
Side Navigation
Top Navigation
Modal Boxes
Progress
<table> Classes
Use the classes below to style any table:
Class Description
.table Adds basic styling (light padding and only horizontal dividers) to a
.table-striped Adds zebra-striping to any table row within <tbody> (not availab
.table-bordered Adds border on all sides of the table and cells
.table-hover Enables a hover state on table rows within a <tbody>
.table-condensed Makes table more compact by cutting cell padding in half
Combining all the table classes
<tr>, <th> and <td> Classes

Use the classes below to color table rows or cells:
Class Description
.active Applies the hover color (light-grey) to a particular row or cell
.success Indicates a successful or positive action

.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll
horizontally on small devices (under 768px). When viewing on anything larger
than 768px wide, there is no difference:
Example
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Try it Yourself
abs and Pills
Class Description
.nav nav-tabs Creates navigation tabs
.nav nav-pills Creates navigation pills

.nav nav-pills nav- Creates vertical navigation pills
stacked
.nav-justified Makes navigation tabs/pills equal widths of their parent, at scree

smaller screens, the nav tabs/pills are stacked
.disabled Indicates a disabled (unclickable) tab/pill
Navigation tabs with dropdown menu
Navigation pills with dropdown menu
.tab-content Together with .tab-pane and data-toggle="tab" (data-toggle="pi

tab/pill toggleable
.tab-pane Together with .tab-content and data-toggle="tab" (data-toggle=

tab/pill toggleable
Navbars
Class Description
.navbar Creates a navigation bar

.navbar- Added to a link or a header element inside the navbar to represent a logo o
brand
.navbar- Collapses the navbar (hidden and replaced with a menu/hamburger icon on
collapse tablets)
.navbar- Creates a default navigation bar (light-grey background color)

default
.navbar- Makes the navbar stay at the bottom of the screen (sticky/fixed)
fixed-bottom
.navbar- Makes the navbar stay at the top of the screen (sticky/fixed)
fixed-top
.navbar-form Added to form elements inside the navbar to vertically center them (proper
.navbar- Added to a container element that contains the link/element that represent
header
.navbar- Creates a black navigation bar (instead of light-grey)

inverse
.navbar-left Aligns nav links, forms, buttons, or text, in the navbar to the left
.navbar-link Styles an element to look like a link inside the navbar (anchors get proper p
hover, while other elements like p or span gets a default hover effect - whit
and a black color in a default navbar)
.navbar-nav Used on a <ul> container that contains the list items with links inside a nav
.navbar-right Aligns nav links, forms, buttons, or text in the navbar to the right.
.navbar- Removes left, top and right borders (rounded corners) from the navbar (def
static-top border and a 4px border-radius by default)
.navbar-text Vertical align any elements inside the navbar that are not links (ensures pro
.navbar- Styles the button that should open the navbar on small screens. Often used
toggle bar classes to indicate a toggleable menu icon (hamburger/bars)
Breadcrumbs and Pagination
Class Description
.breadcrumb Makes a breadcrumb

.pager Provides simple pagination links (Previous/Next)
.previous Aligns the .pager previous button to the left
.next Aligns the .pager next button to the right
.disabled Indicates an unclickable link
.pagination Provides pagination links
.pagination-lg Used together with the .pagination class to provide lar
.pagination-sm Used together with the .pagination class to provide sm
.disabled Indicates an unclickable link
.active Indicates the current page
Labels and Badges
Class Description
.label label-default Indicates a default grey label
.label label-primary Indicates a blue label of type "primary"
.label label-success Indicates a green label of type "success"
.label label-info Indicates a light blue label of type "info"
.label label-warning Indicates a yellow label of type "warning"
.label label-danger Indicates a red label of type "danger"
.badge Indicates new or unread items
.jumbotron Indicates a big box for calling extra attention to featured conte
.jumbotron (extra) To let the .jumbotron box span the full width, and without roun
the .container class
<img> Classes
The classes below can be used to style any image:
Class Description
.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 (will scale nicely to the parent elemen
Responsive Images
Create responsive images by adding an .img-responsive class to
the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies max-width: 100%, height: auto,
and display:block to the image:
Example
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser
window to see the effect):</p>
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
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>, <textarea>,
and <select> elements
The following example creates a simple Bootstrap form with two input fields,
one checkbox, and a submit button:
Bootstrap Form Example

<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Try it Yourself
Form Classes
Class Description
.form-inline Makes a <form> left-aligned with inline-block controls (This only app
that are at least 768px wide)
.form-horizontal Aligns labels and groups of form controls in a horizontal layout
.form-control Used on input, textarea, and select elements to span the entire width
responsive
.form-control- Form validation class

feedback
.form-control-static Adds plain text next to a form label within a horizontal form
.form-group Container for form input and label
Input Classes
Class Description
.input-group Container to enhance an input by adding an icon, text or a button in fr

text"
.input-group-lg Large input group
.input-group-sm Small input group
.input-group- Together with the .input-group class, this class makes it possible to ad
addon the input field
.input-group-btn Together with the .input-group class, this class attaches a button next
search bar
.input-lg Large input field
.input-sm Small input field
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Vertical (basic) Form</h2>
<form>
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Inline form</h2>
<p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left
aligned, and the labels are alongside.</p>
<form class="form-inline">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Horizontal form</h2>
<form class="form-horizontal">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
</head>
<body>
<h2>Vertical (basic) form</h2>

<form action="/action_page.php">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"

name="pwd">
</div>
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Horizontal form: control states</h2>
<form class="form-horizontal">
<label class="col-sm-2 control-label">Focused</label>
<input class="form-control" id="focusedInput" type="text" value="Click to focus...">
</div>
</div>
<label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..."

disabled>
</div>
</div>
<fieldset disabled>
<label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list (Fieldset

disabled)</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
</div>
<label for="disabledSelect" class="col-sm-2 control-label"></label>

<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">Input with warning and glyphicon</label>
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label>
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Horizontal form with static control</h2>
<form class="form-horizontal" action="/action_page.php">
<label class="control-label col-sm-2" for="email">Email:</label>
<p class="form-control-static">someone@example.com</p>
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
name="pwd">
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Vertical (basic) form</h2>

<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>

name="pwd">
</div>
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>Input Groups</h3>
<p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front
or behind it as a "help text".</p>
<p>The .input-group-addon class attaches an icon or help text next to the input field.</p>
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password"

placeholder="Password">
</div>
<br>
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
<br>
<p>It can also be used on the right side of the input:</p>
<form>
</div>

</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Input Group Size</h1>

<p>Use the .input-group-lg if you want a large input group:</p>
<form>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-

search"></i></button>
</div>
</div>
</form>
<br>
<p>Use the .input-group-sm if you want a small input group:</p>
<form>
<div class="input-group input-group-sm">

</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Input Group Size</h1>
<p>Use the .input-group-lg if you want a large input group:</p>
<form>
<div class="input-group input-group-lg">

</div>
</div>
</form>
<br>
<p>Use the .input-group-sm if you want a small input group:</p>
<form>
<div class="input-group input-group-sm">


</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>Input Groups</h3>
<p>The .input-group-addon class attaches an icon or help text next to the input field.</p>
<form>
</div>

</div>
<br>
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
<br>
<p>It can also be used on the right side of the input:</p>
<form>
</div>

</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Input Group Button</h1>
<p>The .input-group-btn class attaches a button next to an input field. This is often used as a search
bar:</p>
<input type="text" class="form-control" placeholder="Search" name="search">

</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Input Sizing</h2>
<p>The form below shows input elements with different heights using .input-lg and .input-sm:</p>
<form>
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
<label for="inputsm">input-sm</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<label for="sel1">Default select list</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<label for="sel2">input-lg</label>
<select class="form-control input-lg" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<label for="sel3">input-sm</label>
<select class="form-control input-sm" id="sel3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>
</div>
</body>
</html>
Typography
The elements below are HTML elements that will be styled a little bit differently
by Bootstrap than browser defaults. Look at the "Try it" examples to see the
result/differences.
The classes below is used to style the elements further.
Element/Class Description
<h1> - <h6> h1 - h6 headings

or
.h1 - .h6
<small> Creates a lighter, secondary text in any heading
Heading (secondary text)

.small Indicates smaller text (set to 85% of the size of the parent): Smaller te
.lead Makes a text stand out: Stand out text

<mark> Highlights text: Highlighted text
or
.mark
<del> Indicates deleted text: Deleted text
<s> Indicates no longer relevant text: No longer relevant text
<ins> Indicates inserted text: Inserted text
<u> Indicates underlined text: Underlined text
<strong> Indicates bold text: Bold text
<em> Indicates italic text: Italic text
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text: lowercased text
.text-uppercase Indicates uppercased text: UPPERCASED TEXT
.text-capitalize Indicates capitalized text: Capitalized Text
<abbr> The <abbr> element indicates an abbreviation or acronym. Abbreviati

a dotted bottom border and a help cursor on hover, providing addition
.initialism Displays the text inside the <abbr> element in a slightly smaller font s
<address> Presents contact information
<blockquote> Indicates blocks of content from another source
.blockquote- Indicates a blockquote with right-aligned content

reverse
<ul> Indicates an unordered list
<ol> Indicates an ordered list
.list-unstyled Removes the default list-style and left margin on list items (works on
class only applies to immediate children list items (to remove the defa
lists, apply this class to any nested lists as well)
.list-inline Places all list items on a single line
<dl> Indicates a description list
.dl-horizontal Lines up the terms and descriptions in the <dl> element side-by-side.
but when the browser window expands, it will line up side-by-side
Code
Element/Class Description
<var> Indicates variables: x = ab + y
<kbd> Indicates input that is typically entered via the keyboard: CT

<pre> Indicates multiple lines of code
<pre class="pre- Indicates multiple lines of code with scrollbar

scrollable">
<samp> Indicates sample output from a computer program: Sample
<code> Indicates inline snippets of code: span, div
Button Colors
Basic 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 Groups
AppleSamsungSony
Button Classes
The classes below can be used to style any <a>, <button>, or <input>
element:
Class Description
.btn Adds basic styling to any button
.btn-default Indicates a default/standard button
.btn-primary Provides extra visual weight and identifies the primary action in a
.btn-success Indicates a successful or positive action
.btn-info Contextual button for informational alert messages
.btn-warning Indicates caution should be taken with this action
.btn-danger Indicates a dangerous or potentially negative action

.btn-link Makes a button look like a link (will still have button behavior)
.btn-lg Makes a large button
.btn-sm Makes a small button
.btn-xs Makes an extra small button
.btn-block Makes a block-level button (spans the full width of the parent ele
.active Makes the button appear pressed
.disabled Makes the button disabled
Button Group Classes

The classes below can be used to style any <a>, <button>, or <input>
element:
Class Description
.btn-group Groups buttons together on a single line
.btn-group-justified Makes a group of buttons span the entire width of the screen
.btn-group-lg Large button group (makes all buttons in a button group larger - i
padding)
.btn-group-sm Small button group (makes all buttons in a button group smaller)
.btn-group-xs Extra small button group (makes all buttons in a button group ext
.btn-group-vertical Makes a button group appear vertically stacked
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
</ul>
</div>
</nav>
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-inverse">
</div>
</ul>
</div>
</nav>
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</div>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span

class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</div>

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</div>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
<h2>Navbar Button</h2>
<p>Use the navbar-btn class on a button to vertically align (same padding as links) it inside the
navbar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</div>
</ul>
<form class="navbar-form navbar-left">
</div>

</form>
</div>
</nav>
<h3>Navbar Forms</h3>
<p>Use the .navbar-form class to vertically align form elements (same padding as links) inside the
navbar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

</div>
</ul>
<form class="navbar-form navbar-left">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
<p>Use the .navbar-form class to vertically align form elements (same padding as links) inside the
navbar.</p>
<p>The .input-group-btn class attaches a button next to an input field. This is often used as a search
bar:</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</ul>
<p class="navbar-text">Some text</p>
</nav>
<h3>Navbar Text</h3>
<p>Use the .navbar-text class to vertical align any elements inside the navbar that are not links
(ensures proper padding).</p>
</div>
</body>
</html>
The .navbar-fixed-top class makes the navigation bar fixed at the top:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="height:1500px">
<nav class="navbar navbar-inverse navbar-fixed-top">
</div>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page
scroll.</p>
scroll.</p>
</div>
scroll.</p>
scroll.</p>
</div>
scroll.</p>
scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
</div>
</ul>
</div>
</nav>
<h3>Fixed Bottom Navbar</h3>
<div class="row">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
</div>
</div>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span

</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top
right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Using CSS
1. Copy the entire font-awesome directory into your project.
2. In the <head> of your html, reference the location to your font-awesome.min.css.
3. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
4. Check out the examples to start using Font Awesome!
Using Sass or Less

Use this method to customize Font Awesome 4.7.0 using Less or Sass.
1. Copy the font-awesome/ directory into your project.

2. Open your project's font-awesome/less/variables.less or font-
awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to
point to your font directory.
3. @fa-font-path: "../font";
The font path is relative from your compiled CSS directory.
4. Re-compile your Less or Sass if using a static compiler. Otherwise, you should be good
to go.
5. Check out the examples to start using Font Awesome!
or
Advanced & PackagesPro
Less Ruby Gem
Use the Official Font Awesome Less Ruby Gem to easily get Font Awesome Less into a Rails
project. Generously maintained by @supercodepoet.
1. Add this line to your application's Gemfile:

2. gem 'font-awesome-less'
3. And then execute:

4. $ bundle
5. Or install it yourself as:

6. $ gem install font-awesome-less
If you use Rails, add this to your e.g. application.less:
@import "font-awesome-sprockets";
@import "font-awesome";
Sass Ruby Gem

Use the Official Font Awesome Sass Ruby Gem to easily get Font Awesome Sass into a Rails or
Compass project. Generously maintained by @supercodepoet.
1. Add this line to your application's Gemfile:

2. gem 'font-awesome-sass'
3. And then execute:

4. $ bundle
5. Or install it yourself as:

6. $ gem install font-awesome-sass
If you use Rails, add this to your e.g. application.scss:
@import "font-awesome-sprockets";
@import "font-awesome";
n this article, we are going to discuss various essential sources for Icon fonts such as
Glyphicons font icons which were present in Bootstrap 3, but has been dropped in
Bootstrap 4.
Although the Glyphicons have been dropped in Bootstrap 4, one can still use the other
options to procure such type of icons. They are the upstream version of Glyphicons,
Octicons, Font Awesome, etc. When we use Bootstrap for designing responsive layouts
to create mobile and tablet friendly web pages, it creates lots of issues for designers.
One of such issue is the use of icons. When we use image icons, there is the problem
of improper scaling as the size of the viewport changes and therefore we edit the image
to different sizes as per the viewport size with the help of an image editor. Images as an
icon require some time to load which delays the loading of the webpage on various
devices. Such issues could be overcome with the use of Icon fonts. Most of us were
using Glyphicons in Bootstrap 3 which includes around 260 glyphs from the Glyphicon
Halflings set, but unfortunately it is not available anymore for use in Bootstrap 4.
Icon fonts have the advantages of scalability, easy manipulation of size, color and
shape (CSS modifications) over image icon where we require Photoshop to meet our
desired icon shape, size and color. Font Awesome is very essential resource to get icon
fonts while working with the Bootstrap.
Font Awesome
It is widely used by Bootstrap web designers as they look great on retina display
devices and are compatible with a large number of screen readers. Font Awesome
provides us with the scalable vector icons that can instantly be customized in terms of
size, color, drop shadow, and anything that can be done with the power of CSS. Font
Awesome version 4.7.0 is known to have around 675 icons iconic font to choose from.
Step 1: Go to the Font Awesome website through this link http://fontawesome.io/

Step 2: Click on the http://fontawesome.io/icons/ to view the list of available 675
icons.
Step 3: Click on the download button as shown below. It will download a package
named as font-awesome-4.7.0.

Step 4: Copy the entire font-awesome directory into your project.

Step 5: In the head of your html, reference the location to your font-awesome.min.css
with the following HTML code.
1 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Step 6: Choose the icon which you want to use from
page http://fontawesome.io/icons/ . After clicking on that particular icon you can obtain
the HTML code that could be embedded for that particular icon as shown below.

Sample Code
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 
5 <meta charset="utf-8">
6 <meta name="viewport"
7 content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 <meta http-equiv="x-ua-compatible" content="ie=edge">
9 
10 <link rel="stylesheet"
11 href="font-awesome-4.7.0/css/font-awesome.min.css">
12 
13 
14 <link rel="stylesheet"
15 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
16 integrity="sha384-
17 2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
18 crossorigin="anonymous">
19 <title>Glyphicons Example 1</title>
20 </head>
21 <body>
22 <div class="container">
23 <br> <br>
24 <body>
25 <table class="table table-bordered">
26 <thead>
27 <tr>
28 <th>Sequence</th>
29 <th>Icon Category</th>
30 <th>Icon Example</th>
31 </tr>
32 </thead>
33 <tbody>
34 <tr>
35 <th scope="row">1</th>
36 <td>41 New Icons in 4.7</td>
37 <td><i class="fa fa-address-book-o" aria-hidden="true"></i> </td>
38 </tr>
39 <tr>
41 <td>Web Application Icons</td>
42 <td><i class="fa fa-battery-three-quarters" aria-
43 hidden="true"></i></td>
44 </tr>
45 <tr>
47 <td>Accessibility Icons</td>
48 <td><i class="fa fa-volume-control-phone" aria-
49 hidden="true"></i></td>
50 </tr>
51 <tr>
53 <td>Hand Icons</td>
54 <td><i class="fa fa-hand-o-right" aria-hidden="true"></i></td>
55 </tr>
56 <tr>
58 <td>Transportation Icons</td>
59 <td><i class="fa fa-ship" aria-hidden="true"></i></td>
60 </tr>
61 <tr>
63 <td>Gender Icons</td>
64 <td><i class="fa fa-venus-double" aria-hidden="true"></i></td>
65 </tr>
66 <tr>
68 <td>Spinner Icons</td>
69 <td><i class="fa fa-spinner" aria-hidden="true"></i></td>
70 </tr>
71 <tr>
73 <td>Form Control Icons</td>
74 <td><i class="fa fa-plus-square" aria-hidden="true"></i></td>
75 </tr>
76 <tr>
78 <td>Payment Icons</td>
79 <td><i class="fa fa-cc-mastercard" aria-hidden="true"></i></td>
80 </tr>
81 <tr>
83 <td>Chart Icons</td>
84 <td><i class="fa fa-area-chart" aria-hidden="true"></i></td>
85 </tr>
86 <tr>
88 <td>Currency Icons</td>
89 <td><i class="fa fa-inr" aria-hidden="true"></i></td>
90 </tr>
91 <tr>
93 <td>Text Editor Icons</td>
94 <td><i class="fa fa-files-o" aria-hidden="true"></i></td>
95 </tr>
96 <tr>
98 <td>Directional Icons</td>
99 <td><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></td>
100 </tr>
101 <tr>
103 <td>Video Player Icons</td>
104 <td><i class="fa fa-youtube-play" aria-hidden="true"></i></td>
105 </tr>
106 <tr>
108 <td>Brand Icons</td>
109 <td><i class="fa fa-amazon" aria-hidden="true"></i></td>
110 </tr>
111 <tr>
113 <td>Medical Icons</td>
114 <td><i class="fa fa-h-square" aria-hidden="true"></i></td>
115 </tr>
116 </tbody>
117 </table>
118 <br> <br>
119 </div>
120 
121 <script
122 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Output
Other Essential sources are as follows:

1. Bootstrap Arrows: It is not exactly an icon font. The Bootstrap Arrows is a simple
jQuery plugin and add-on to the Bootstrap framework that includes the use of arrows at
any angle in our UI designs for our website.
2. Elusive Icons: It is a web font to use with any of our Bootstrap projects. When we
download this font, then we will also receive all the icons in .svg vector format.
Therefore, we can play around them in order to improve and contribute them back on
GitHub.
3. Fontello: It is one of the easiest way to create a custom icon font for a website.
Here we need to select the images that we want out of the large collection then
download a web font pack to use in our website with just one click.
4. Font Custom: As the name suggests, we can generate our custom icon web fonts
from the comfort of the command line. Font Custom creates styles using Bootstraps
.icon-{{your-icon-name}} naming convention. We need to include fontcustom.css to work
on it.
5. Icon Search: It is a resource which is used to match user provided tags with the
Bootstraps built-in icon classes. It has made the life of a web designer much easier to
find the appropriate classes for icons. E.g. when we search for the word message,
then it will provide us the proper classes for the envelope, message and inbox icons.
6. GlyphSearch: It works similar to that of the icon search, Glyph Search allows us to
search for icons from Font Awesome, IcoMoon, Ionicons, Glyphicons, Octicons, etc.
Conclusion:
In this article, we discussed about various essential sources to procure Icon fonts as
Glyphicons has been dropped in Bootstrap 4. We cannot use image icons due to their
scaling and loading time issues. Also, it will be difficult to shape, size and color image
icons as compared to icon fonts.
Learn About Different Icon Fonts in Bootstrap 4 wa

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>

</div>
<div class="row">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<h3>Column 2</h3>
</div>
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</li>
</li>
</ul>
</nav>
<br>
<h3>Basic Navbar Example</h3>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on
extra large, large, medium or small screens).</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<nav class="navbar bg-light">
</li>
</li>
</li>
</ul>
</nav>
<br>
<h3>Vertical Navbar Example</h3>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<h3>Colored Navbar</h3>
<p>Use any of the .bg-color classes to add a background color to the navbar.</p>
<p>Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-
light class to add a black text color.</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<a class="nav-link" href="#">Link</a>
</li>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">

</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
</li>
</li>

</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
</li>
</li>
</li>
</li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

<a class="navbar-brand" href="#">Logo</a>

</li>
</li>
</li>
</ul>
</nav>
<h3>Brand / Logo</h3>
<p>The .navbar-brand class is used to highlight the brand/logo/project name of your page.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="logo" style="width:40px;">
</a>


</li>
</li>
</li>
</ul>
</nav>
<h3>Brand / Logo</h3>
<p>When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit
the navbar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
</li>
</li>
</li>
</ul>
</div>
</nav>
<br>
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top
right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the
toggler button.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>



</li>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</li>
</ul>
</nav>
<br>
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="button">Search</button>
</form>
</nav>
<br>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
<br>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

</li>
</li>
</ul>

<span class="navbar-text">
Navbar text
</span>
</nav>
<br>
<h3>Navbar Text</h3>
<p>Use the .navbar-text class to vertical align any elements inside the navbar that are not links
(ensures proper padding).</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

</li>
</li>
</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
<h3>Top Fixed Navbar</h3>
scroll.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
</nav>
<div class="container-fluid"><br>
<h3>Bottom Fixed Navbar</h3>
scroll.</p>
</div>
</body>
</html>

Bootstrap 4

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Bootstrap 4

Загружено:

Авторское право:

Доступные форматы

<!

<meta name="viewport" content="width=device-width, initial-scale=1">

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>

<p>Envelope icon as a link:

<span class="glyphicon glyphicon-envelope"></span>

<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>

<p>Search icon on a button:

<button type="button" class="btn btn-default">

<span class="glyphicon glyphicon-search"></span> Search

<p>Search icon on a styled button:

<button type="button" class="btn btn-info">

<span class="glyphicon glyphicon-search"></span> Search

<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>

<p>Print icon on a styled link button:

<a href="#" class="btn btn-success btn-lg">

<span class="glyphicon glyphicon-print"></span> Print

Bootstrap Glyphicon Components

Bootstrap Glyph Example

W3Schools is optimized for learning, testing, and training. Examples might be

.active Adds a blue background color to simulate a "pressed" button

.alert Creates an alert message box

.alert-danger Red alert box. Indicates a dangerous or potentially negative action

.alert-info Light-blue alert box. Indicates some information

.alert-link Used on links inside alerts to add matching colored links

.bg-info Adds a light-blue background color to an element. Represents some information

.bg-primary Adds a blue background color to an element. Represents something important

.bg-warning Adds a yellow background color to an element. Represents a warning or a negative ac

.btn-danger Red button. Indicates danger or a negative action

.btn-default Default button. White background and grey border

.btn-group Groups buttons together on a single line

.btn-info Light-blue button. Represents information

.btn-link Makes a button look like a link (get button behavior)

.btn-lg Large button

.btn-primary Blue button.

.btn-sm Small button

.btn-success Green button. Indicates success or a positive action

.btn-warning Yellow button. Represents warning or a negative action

.btn-xs Extra small button

.carousel Creates a carousel (slideshow)

.carousel-caption Creates a caption text for each slide in the carousel

.carousel-control Container for next and previous links

.carousel-inner Container for slide items

.center-block Centers any element (Sets an element to display:block with margin-right:auto a

.checkbox Container for checkboxes

.clearfix Clears floats

.close Indicates a close icon

.col-*-pull-* Changes the order of the grid columns

.col-*-push-* Changes the order of the grid columns

.collapse Indicates collapsible content - which can be hidden or shown on demand

.collapse in Show the collapsible content by default

.container-fluid A container that spans the full width of the screen

.control-label Allows a label to be used for form validation

.disabled Disables a button (adds opacity and a "no-parking-sign" icon on hover)

.dropdown-header Used to add headers inside the dropdown menu

.dropdown-menu- Right-aligns a dropdown menu

.dropup Indicates a dropup menu (upwards instead of downwards)

.fade Adds a fading effect when closing an alert box

.form-control- Form validation class

.form-group Container for form input and label

.form-horizontal Aligns labels and groups of form controls in a horizontal layout

.hidden Forces an element to be hidden (display:none)

.hidden-* Hides content depending on screen size

.hide Deprecated. Use .hidden instead

.img-circle Shapes an image to a circle (not supported in IE8 and earlier)

.col--pull- Changes the order of the grid columns

.col--push- Changes the order of the grid columns