Bootstrap UI Components: Icons, Navigation, and Interactive Elements

Glyphicons Icon Fonts

Glyphicons provide scalable vector icons that can be customized using CSS properties like size, color, and shadow effects.

<div class="container">
    <span class="glyphicon glyphicon-envelope"></span>
    
    <a href="#" class="btn btn-default">
        <span class="glyphicon glyphicon-plus"></span>
    </a>
    
    <button class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-fire"></span>
    </button>
    
    <button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
        <span class="glyphicon glyphicon-user"></span> Profile
    </button>
</div>

Dropdown Menus

Dropdown menus are toggleable contextual overlays for displaying lists of links and actions.

<div class="container">
    <!-- Use .dropup for upward expansion -->
    <div class="dropdown">
        <button type="button" class="btn btn-warning" data-toggle="dropdown">
            <span class="glyphicon glyphicon-user"></span>
            <span class="caret"></span>
        </button>
        
        <ul class="dropdown-menu" role="menu">
            <li class="dropdown-header">Select Region</li>
            <li><a href="#">Beijing</a></li>
            <li class="disabled"><a href="#">Shanghai</a></li>
            <li><a href="#">Guangzhou</a></li>
            <li class="divider"></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
</div>

Navigation Components

Bootstrap navigation components share a base .nav class with various modifier classes for different visual styles.

Tab Navigation

Create tab-style navigation using .nav-tabs with an unordered list.

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Dashboard</a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>

Pill Navigation

Replace .nav-tabs with .nav-pills for capsule-style navigation items.

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Vertical Pills

Add .nav-stacked alongside .nav-pills for vertically stacked navigation.

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
</ul>

Justified Navigation

Apply .nav-justified to make navigation items equal width and fill the container on screens wider than 768px.

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Tab One</a></li>
    <li><a href="#">Tab Two</a></li>
    <li><a href="#">Tab Three</a></li>
</ul>

Disabled Links

Add .disabled to navigation items to gray out links and remove hover states.

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Active</a></li>
    <li><a href="#">Enabled</a></li>
    <li class="disabled"><a href="#">Disabled</a></li>
</ul>

Dropdowns in Navigation

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Categories <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Electronics</a></li>
            <li><a href="#">Clothing</a></li>
            <li class="divider"></li>
            <li><a href="#">All Items</a></li>
        </ul>
    </li>
</ul>

Navbar Component

The navbar serves as a responsive navigation header that collapses on mobile devices and expands horizontally on larger viewports.

Basic Navbar

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand Name</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Services <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Consulting</a></li>
                    <li><a href="#">Development</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Responsive Navbar with Toggle

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" 
                    data-target="#main-nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MyApp</a>
        </div>
        <div class="collapse navbar-collapse" id="main-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Profile</a></li>
            </ul>
        </div>
    </div>
</nav>

Navbar Forms

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">AppName</a>
        </div>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search...">
            </div>
            <button type="submit" class="btn btn-default">Go</button>
        </form>
    </div>
</nav>

Navbar Buttons

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Portal</a>
        </div>
        <button type="button" class="btn btn-default navbar-btn">
            Action Button
        </button>
    </div>
</nav>

Navbar Text

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">SiteName</a>
        </div>
        <p class="navbar-text">Welcome, Guest</p>
    </div>
</nav>

Navbar with Icons

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">App</a>
        </div>
        <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>

Component Alignment

Use .navbar-left or .navbar-right utility classes to align navigation components.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Demo</a>
        </div>
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Options <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Option A</a></li>
                    <li><a href="#">Option B</a></li>
                </ul>
            </li>
        </ul>
        <p class="navbar-text navbar-right">Right-aligned text</p>
    </div>
</nav>

Inverted Navbar

Apply .navbar-inverse for a dark-themed navigation bar.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Dark Theme</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
        </ul>
    </div>
</nav>

Pagination

Standard Pagination

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">»</a></li>
</ul>

Pagination States

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">»</a></li>
</ul>

Pagination Sizing

<!-- Large pagination -->
<ul class="pagination pagination-lg">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">»</a></li>
</ul>

<!-- Small pagination -->
<ul class="pagination pagination-sm">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">»</a></li>
</ul>

Pager Navigation

<!-- Default pager -->
<ul class="pager">
    <li class="previous"><a href="#">← Previous</a></li>
    <li class="next"><a href="#">Next →</a></li>
</ul>

<!-- Pager with disabled state -->
<ul class="pager">
    <li class="previous disabled"><a href="#">← Previous</a></li>
    <li class="next"><a href="#">Next →</a></li>
</ul>

Labels

Labels display counts, hints, or markers with contextual colors.

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Media Objects

Media objects create components with image/video content aligned to one side, ideal for blog comments or article listings.

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="avatar.png" alt="Avatar" width="80" height="80">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Comment Title</h4>
        <p>This is sample content for the media object. Text wraps around the image.</p>
        <!-- Nested media object -->
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="reply.png" alt="Reply" width="60" height="60">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Reply Title</h4>
                <p>Nested reply content here.</p>
            </div>
        </div>
    </div>
</div>

For a list of media items, use the .media-list container:

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#"><img class="media-object" src="item1.png"></a>
        <div class="media-body">...</div>
    </li>
    <li class="media">
        <a class="pull-left" href="#"><img class="media-object" src="item2.png"></a>
        <div class="media-body">...</div>
    </li>
</ul>

Badges

Badges highlight new or unread items with rounded indicators, similar to labels but with softer corners.

<a href="#">Messages <span class="badge">25</span></a>

Badges integrate seamlessly with navigation components:

<h4>Pill Navigation with Badges</h4>
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">Inbox <span class="badge">42</span></a>
    </li>
    <li>
        <a href="#">Sent</a>
    </li>
    <li>
        <a href="#">Drafts <span class="badge">3</span></a>
    </li>
</ul>

<h4>Stacked Pills with Right-Aligned Badges</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 280px;">
    <li class="active">
        <a href="#"><span class="badge pull-right">42</span>Inbox</a>
    </li>
    <li>
        <a href="#">Sent</a>
    </li>
    <li>
        <a href="#"><span class="badge pull-right">3</span>Drafts</a>
    </li>
</ul>

Tags: Bootstrap frontend CSS Framework UI Components web development

Posted on Tue, 23 Jun 2026 17:10:12 +0000 by BigToach

Hot Tags

©2026 Freaks City