0% found this document useful (0 votes)

333 views

Bootstrap 4

The document discusses Bootstrap glyphicon components, providing examples and a list of over 260 available glyphs with descriptions.

Uploaded by

shahim akram

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

333 views

Bootstrap 4

The document discusses Bootstrap glyphicon components, providing examples and a list of over 260 available glyphs with descriptions.

Uploaded by

shahim akram

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 141

<!

DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h2>Glyphicon Examples</h2>

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

<p>Envelope icon as a link:

<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-sound-6-1

glyphicon glyphicon-sound-7-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

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-btn Vertically aligns a button inside a navbar

.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>

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

</head>

<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>
<div class="form-group">
<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>

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

</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>

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password">

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

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

</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>

<label for="email">Email:</label>

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

</div>

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password">

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h2>Horizontal form</h2>

<label class="control-label col-sm-2" for="email">Email:</label>

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

</div>

<label class="control-label col-sm-2" for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password">

</div>

<div class="col-sm-offset-2 col-sm-10">

<div class="checkbox">
<label><input type="checkbox"> Remember me</label>

</div>

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Vertical (basic) form</h2>

<label for="email">Email:</label>

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

</div>

<body>

<h2>Horizontal form: control states</h2>

<label class="col-sm-2 control-label">Focused</label>

<input class="form-control" id="focusedInput" type="text" value="Click to focus...">

</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>

<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>

<label for="disabledSelect" class="col-sm-2 control-label"></label>

<select id="disabledSelect" class="form-control">

<option>Disabled select</option>

</select>

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>

</form>
</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</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">[email protected]</p>

</div>

<label class="control-label col-sm-2" for="pwd">Password:</label>

</div>

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h2>Vertical (basic) form</h2>

<label for="email">Email:</label>

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

</div>

<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>

<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>

<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>

<input id="email" type="text" class="form-control" name="email" placeholder="Email">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

</div>

<input id="password" type="password" class="form-control" name="password"

placeholder="Password">

<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h1>Input Group Size</h1>

<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>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">

<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-

search"></i></button>

</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">

<input type="text" class="form-control" placeholder="Search">

<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-

search"></i></button>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

</head>

<body>

<h1>Input Group Size</h1>

<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>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">

<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-

search"></i></button>

</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">

<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-

search"></i></button>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</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>

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input id="email" type="text" class="form-control" name="email" placeholder="Email">

<input id="email" type="text" class="form-control" name="email" placeholder="Email">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

</div>

<input id="password" type="password" class="form-control" name="password"

placeholder="Password">

<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

</div>
</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<h1>Input Group Button</h1>

<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-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">

<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-

search"></i></button>
</div>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</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>

<div class="form-group">
<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>

</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

.navbar-btn Vertically aligns a button inside a navbar

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>

<head>

<title>Bootstrap Example</title>

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

</head>

<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>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</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>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

<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>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

</div>

</nav>

<h3>Inverted Navbar</h3>

<p>An inverted navbar is black instead of gray.</p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>
<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

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

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span

class="caret"></span></a>

<li><a href="#">Page 1-1</a></li>

<li><a href="#">Page 1-2</a></li>

<li><a href="#">Page 1-3</a></li>

</ul>

</li>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></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>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

<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-1</a></li>

<li><a href="#">Page 1-2</a></li>

<li><a href="#">Page 1-3</a></li>

</ul>

</li>

<li><a href="#">Page 2</a></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>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<nav class="navbar navbar-inverse">

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

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</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>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

<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>

<li><a href="#">Page 2</a></li>

</ul>

<form class="navbar-form navbar-left">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</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>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

<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>

<li><a href="#">Page 2</a></li>

</ul>

<form class="navbar-form navbar-left">

<input type="text" class="form-control" placeholder="Search">

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

<i class="glyphicon glyphicon-search"></i>

</button>

</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>

<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-btn class attaches a button next to an input field. This is often used as a search
bar:</p>

</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

<ul class="nav navbar-nav">

</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>

<head>

<title>Bootstrap Example</title>

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

</head>

<nav class="navbar navbar-inverse navbar-fixed-top">

<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>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

</div>

</nav>
<div class="container" style="margin-top:50px">

<h3>Fixed Navbar</h3>

<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page
scroll.</p>

</div>

<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page
scroll.</p>

</div>

<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page
scroll.</p>

</div>

<h1>Scroll this page to see the effect</h1>

</body>

</html>

<!DOCTYPE html>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-bottom">

<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>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

</div>

</nav>

<h3>Fixed Bottom Navbar</h3>

<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<div class="clearfix visible-lg"></div>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>
<div class="clearfix visible-lg"></div>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<div class="clearfix visible-lg"></div>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>

</div>

<div class="clearfix visible-lg"></div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

</head>

<body>

<nav class="navbar navbar-inverse">

</button>

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

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span

class="caret"></span></a>

<li><a href="#">Page 1-1</a></li>

</nav>
<div class="container">

<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>
40 <th scope="row">2</th>
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>
46 <th scope="row">3</th>
47 <td>Accessibility Icons</td>
48 <td><i class="fa fa-volume-control-phone" aria-
49 hidden="true"></i></td>
50 </tr>
51 <tr>
52 <th scope="row">4</th>
53 <td>Hand Icons</td>
54 <td><i class="fa fa-hand-o-right" aria-hidden="true"></i></td>
55 </tr>
56 <tr>
57 <th scope="row">5</th>
58 <td>Transportation Icons</td>
59 <td><i class="fa fa-ship" aria-hidden="true"></i></td>
60 </tr>
61 <tr>
62 <th scope="row">6</th>
63 <td>Gender Icons</td>
64 <td><i class="fa fa-venus-double" aria-hidden="true"></i></td>
65 </tr>
66 <tr>
67 <th scope="row">7</th>
68 <td>Spinner Icons</td>
69 <td><i class="fa fa-spinner" aria-hidden="true"></i></td>
70 </tr>
71 <tr>
72 <th scope="row">7</th>
73 <td>Form Control Icons</td>
74 <td><i class="fa fa-plus-square" aria-hidden="true"></i></td>
75 </tr>
76 <tr>
77 <th scope="row">8</th>
78 <td>Payment Icons</td>
79 <td><i class="fa fa-cc-mastercard" aria-hidden="true"></i></td>
80 </tr>
81 <tr>
82 <th scope="row">9</th>
83 <td>Chart Icons</td>
84 <td><i class="fa fa-area-chart" aria-hidden="true"></i></td>
85 </tr>
86 <tr>
87 <th scope="row">10</th>
88 <td>Currency Icons</td>
89 <td><i class="fa fa-inr" aria-hidden="true"></i></td>
90 </tr>
91 <tr>
92 <th scope="row">11</th>
93 <td>Text Editor Icons</td>
94 <td><i class="fa fa-files-o" aria-hidden="true"></i></td>
95 </tr>
96 <tr>
97 <th scope="row">12</th>
98 <td>Directional Icons</td>
99 <td><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></td>
100 </tr>
101 <tr>
102 <th scope="row">13</th>
103 <td>Video Player Icons</td>
104 <td><i class="fa fa-youtube-play" aria-hidden="true"></i></td>
105 </tr>
106 <tr>
107 <th scope="row">14</th>
108 <td>Brand Icons</td>
109 <td><i class="fa fa-amazon" aria-hidden="true"></i></td>
110 </tr>
111 <tr>
112 <th scope="row">15</th>
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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<div class="jumbotron text-center">

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

<p>A navigation bar is a navigation header that is placed at the top of the page.</p>

<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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar bg-light">

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</li>
</ul>

</nav>

<br>

<h3>Vertical 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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

</li>

</ul>
</nav>

<nav class="navbar navbar-expand-sm bg-warning navbar-dark">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</nav>

</body>

</html>

<!DOCTYPE html>

<head>
<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

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

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>
<div class="container-fluid">

<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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

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

<img src="bird.jpg" alt="logo" style="width:40px;">

</a>

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<a class="nav-link" href="#">Link 3</a>

</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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

</div>

</nav>

<br>

<div class="container">
<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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

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

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

Dropdown link

</a>

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<input class="form-control" type="text" placeholder="Search">

<button class="btn btn-success" type="button">Search</button>

</form>

</nav>

<br>

<h3>Navbar Forms</h3>

<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>

</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<input type="text" class="form-control" placeholder="Username">

</div>

</form>

</nav>

<br>

<h3>Navbar Forms</h3>

<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>

</div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<a class="nav-link" href="#">Link 1</a>

</li>

<a class="nav-link" href="#">Link 2</a>

</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>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">

</head>

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

<a class="nav-link" href="#">Link</a>

</li>

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</nav>

<div class="container-fluid" style="margin-top:80px">

<h3>Top Fixed Navbar</h3>

<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page
scroll.</p>

<h1>Scroll this page to see the effect</h1>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-

beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

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

<a class="nav-link" href="javascript:void(0)">Link</a>

</li>

<a class="nav-link" href="javascript:void(0)">Link</a>

</li>

</ul>

</nav>

<h3>Bottom Fixed Navbar</h3>

<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page
scroll.</p>

<h1>Scroll this page to see the effect</h1>

</div>

</body>

</html>

Anjali: ASUS Product Service Form
No ratings yet
Anjali: ASUS Product Service Form
1 page
User Requirements For A Water For Injection System
67% (3)
User Requirements For A Water For Injection System
42 pages
Lazada
No ratings yet
Lazada
193 pages
Components Bootstrap PDF
No ratings yet
Components Bootstrap PDF
65 pages
Untitled
No ratings yet
Untitled
162 pages
Thiruvananthapuram To Munnar by Road, Route From Trivandrum To Munnar
No ratings yet
Thiruvananthapuram To Munnar by Road, Route From Trivandrum To Munnar
37 pages
Creds Crawl
No ratings yet
Creds Crawl
6 pages
Flipbook Url Upload
No ratings yet
Flipbook Url Upload
5 pages
Weather App Res
No ratings yet
Weather App Res
18 pages
Long
No ratings yet
Long
323 pages
Argo
No ratings yet
Argo
59 pages
CA Rossel
No ratings yet
CA Rossel
10 pages
Download File
No ratings yet
Download File
62 pages
WD Lab Manual
No ratings yet
WD Lab Manual
63 pages
Front End Development
No ratings yet
Front End Development
13 pages
Manual of Chatbot
No ratings yet
Manual of Chatbot
3 pages
Me
No ratings yet
Me
28 pages
Ctrl+shift and Exit The Document. Thank You and Regards Ajhje Please Check The Info and Use The Shortcut Wisely Okay Signing Out. Regards
No ratings yet
Ctrl+shift and Exit The Document. Thank You and Regards Ajhje Please Check The Info and Use The Shortcut Wisely Okay Signing Out. Regards
10 pages
Gradua Cao
No ratings yet
Gradua Cao
92 pages
downtown
No ratings yet
downtown
12 pages
Error
No ratings yet
Error
125 pages
A Me Piacciono I Ragazzi Racconto Saffico Di Helel Erotici Racconti02
No ratings yet
A Me Piacciono I Ragazzi Racconto Saffico Di Helel Erotici Racconti02
165 pages
!doctype HTML Public "-//w3c//Dtd XHTML 1.0 Strict//en"
No ratings yet
!doctype HTML Public "-//w3c//Dtd XHTML 1.0 Strict//en"
54 pages
WEB Assignment 2
No ratings yet
WEB Assignment 2
10 pages
Screen Stylesheet Text/css Screen Stylesheet Text/css Screen Stylesheet Text/css Text/javascript Text/javascript
No ratings yet
Screen Stylesheet Text/css Screen Stylesheet Text/css Screen Stylesheet Text/css Text/javascript Text/javascript
39 pages
Il Nostro Primo Incontro Racconto Saffico Di Eve Erotici Racconti20
0% (1)
Il Nostro Primo Incontro Racconto Saffico Di Eve Erotici Racconti20
167 pages
webscraping (1)
No ratings yet
webscraping (1)
15 pages
New Text Document
No ratings yet
New Text Document
6 pages
Accordion
No ratings yet
Accordion
7 pages
Downloadfile
No ratings yet
Downloadfile
5 pages
html tfw
No ratings yet
html tfw
42 pages
Code
No ratings yet
Code
46 pages
Saroja Devi Sex StoriesMalavin Leelaikal Part5
30% (10)
Saroja Devi Sex StoriesMalavin Leelaikal Part5
34 pages
BBBVB
No ratings yet
BBBVB
8 pages
C 1 C
No ratings yet
C 1 C
7 pages
62fbb64b08241 Tps Street Soccer Script Reach
No ratings yet
62fbb64b08241 Tps Street Soccer Script Reach
3 pages
Piyush
No ratings yet
Piyush
5 pages
Maisr
No ratings yet
Maisr
107 pages
Documento
No ratings yet
Documento
8 pages
code buoi6
No ratings yet
code buoi6
8 pages
Day-21, project-4,cravefx -6
No ratings yet
Day-21, project-4,cravefx -6
27 pages
New Text Document
No ratings yet
New Text Document
6 pages
Pseudocode Pro Website
No ratings yet
Pseudocode Pro Website
25 pages
Tutorial
No ratings yet
Tutorial
18 pages
message
No ratings yet
message
11 pages
Astrid A Culo Pieno Racconto Saffico Di Patrizia v. Erotici Racconti06
No ratings yet
Astrid A Culo Pieno Racconto Saffico Di Patrizia v. Erotici Racconti06
174 pages
codes in html 1
No ratings yet
codes in html 1
22 pages
HTLM Scribd
No ratings yet
HTLM Scribd
38 pages
Web Development Internship: Learnovate Ecommerce
No ratings yet
Web Development Internship: Learnovate Ecommerce
22 pages
DOCTYPE HTML
No ratings yet
DOCTYPE HTML
4 pages
OEXV16 Djvu
No ratings yet
OEXV16 Djvu
711 pages
Jquery: HTML Head Script
No ratings yet
Jquery: HTML Head Script
5 pages
Compagne Di Collegio - I Racconti Erotici Migliori11
No ratings yet
Compagne Di Collegio - I Racconti Erotici Migliori11
169 pages
TB News September
No ratings yet
TB News September
40 pages
UI and UX Lab - Print Out
No ratings yet
UI and UX Lab - Print Out
54 pages
Amiche Al Mare Racconto Saffico Di ChopstickNick Erotici Racconti03
No ratings yet
Amiche Al Mare Racconto Saffico Di ChopstickNick Erotici Racconti03
162 pages
Ganti Skrip
No ratings yet
Ganti Skrip
16 pages
Scrib CH
No ratings yet
Scrib CH
22 pages
Untitled
100% (1)
Untitled
353 pages
Github Intro
No ratings yet
Github Intro
5 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
How to a Developers Guide to 4k: Developer edition, #3
From Everand
How to a Developers Guide to 4k: Developer edition, #3
Xinc Cyberwizard
No ratings yet
Kkpolytechnic Bazar
No ratings yet
Kkpolytechnic Bazar
1 page
MD Shahim Akaram: Network Engineer
No ratings yet
MD Shahim Akaram: Network Engineer
3 pages
MD Shahim Akram: Curriculum-Vitae
No ratings yet
MD Shahim Akram: Curriculum-Vitae
3 pages
MD Shahim Akram: Curriculum-Vitae
No ratings yet
MD Shahim Akram: Curriculum-Vitae
3 pages
Quiz App Angularjs
No ratings yet
Quiz App Angularjs
5 pages
Ebook - Top 100 Interview Questions & Answers On IOT
No ratings yet
Ebook - Top 100 Interview Questions & Answers On IOT
22 pages
Manual Band in A Box
No ratings yet
Manual Band in A Box
8 pages
DSP Lab Report
100% (1)
DSP Lab Report
19 pages
2019-2020 Adopt A School Program Report Hs
No ratings yet
2019-2020 Adopt A School Program Report Hs
22 pages
Eurotherm 2704 PDF
No ratings yet
Eurotherm 2704 PDF
2 pages
How To Use Photoshop Effects 3
No ratings yet
How To Use Photoshop Effects 3
196 pages
Backup A Data Base Using A VBScript - Automated
No ratings yet
Backup A Data Base Using A VBScript - Automated
10 pages
RC002 Config Tool User Manual
No ratings yet
RC002 Config Tool User Manual
25 pages
Run Commands
No ratings yet
Run Commands
3 pages
Data Structures With C Record
No ratings yet
Data Structures With C Record
46 pages
Nexg Intro Deck
No ratings yet
Nexg Intro Deck
9 pages
Foundation Guide
No ratings yet
Foundation Guide
332 pages
Introduction To Tourism and Hospitality in BC 2nd Edition 1700498310. Print
No ratings yet
Introduction To Tourism and Hospitality in BC 2nd Edition 1700498310. Print
600 pages
How To Keep A Lab Notebook - Science - AAAS
No ratings yet
How To Keep A Lab Notebook - Science - AAAS
7 pages
CloudFront Checklist
No ratings yet
CloudFront Checklist
2 pages
Pdfdocs 4 - Advanced User Guide
No ratings yet
Pdfdocs 4 - Advanced User Guide
86 pages
Dynamic Relaxation Procedures For The Definition of Initial Static Configurations of Flexible Lines
No ratings yet
Dynamic Relaxation Procedures For The Definition of Initial Static Configurations of Flexible Lines
17 pages
Service Manual: DSC-F828
No ratings yet
Service Manual: DSC-F828
2 pages
SD Workshop 1
No ratings yet
SD Workshop 1
23 pages
Cad Cam Unit 4
No ratings yet
Cad Cam Unit 4
35 pages
3GenData Intellinasv9000
No ratings yet
3GenData Intellinasv9000
2 pages
HV9120
No ratings yet
HV9120
11 pages
73 Shortcuts For Virtual DJ
No ratings yet
73 Shortcuts For Virtual DJ
3 pages
AZ-104-MicrosoftAzureAdministrator LAB 01-Manage Azure AD Identities
No ratings yet
AZ-104-MicrosoftAzureAdministrator LAB 01-Manage Azure AD Identities
10 pages
SIMTarget User's Guide
No ratings yet
SIMTarget User's Guide
33 pages
Veritek VIPS 80L
No ratings yet
Veritek VIPS 80L
2 pages
Protocol and ION Technology
No ratings yet
Protocol and ION Technology
10 pages
LITE Midterms
No ratings yet
LITE Midterms
7 pages