Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges

Jun 12, 2017Download as PPTX, PDF2 likes202 views

This document provides code snippets for various Bootstrap components including dropdown menus, button groups, input groups, navigation tabs and bars, breadcrumbs, pagination, labels, and badges. Each component is defined with HTML markup and styled with Bootstrap classes.

BOOTSTRAP
DROPDOWN1
2 Button Group2
Input Group3
2 Nav4
2 Navbar5
Breadcrumbs6
2 Pagination7
Label8
4
2
Badges9

DROPDOWN
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Button Group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

Input Group
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-
addon1">
</div>

Navbar
.navbar .navbar-default
.navbar .navbar-inverse
.navbar-fixed-top

Breadcrumbs
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

Pagination
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>

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

Badges
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>

This document provides an overview of Flask templates (Jinja2) including blocks, inheritance, variable scope, rendering templates, filters, forms with Flask-WTF, and the Flask-Admin extension. It demonstrates how to structure templates with common base templates, extend templates, and pass data between routes and templates. It also shows how to build forms, validate input, and customize the Flask-Admin interface.

Warning 2XhackerPatrick Hufalar

Friendlier, Safer WordPress Admin AreasCliff Seal

Javascripttimsplin

The document discusses JavaScript and jQuery. It provides an overview of JavaScript, highlighting that it is client-side, not all browsers support it, and users can disable it. It also discusses progressive enhancement and common JavaScript libraries like jQuery, MooTools, and Google libraries. The bulk of the document outlines a tutorial for using jQuery, covering selecting elements, events, and modifying styles.

Caja de likesJo Rodriguez

This document provides two options for embedding Facebook content on a website. The first option inserts Facebook's JavaScript SDK which allows dynamic embedding of like buttons, comments, and other plugins. The second option directly embeds a like box for a specific Facebook page with customization options for color scheme, showing faces, headers and streaming posts. It also embeds a Flash-based radio player for an Latin music explosion radio station.

JavascriptJitendra Negi

The document contains examples of using JavaScript to modify various CSS style properties of HTML elements, including background, border, font, overflow, padding, and transition properties. Code snippets show how to select elements by ID and change properties like background color, image, position, border width and style, font family and size, overflow behavior, padding, and transition timing function on hover.

SuperMondays, July 2011Peacock Carter Ltd

"As frontend developers, it’s often our job to integrate (X)HTML and CSS with various content management systems, forums and discussion boards, ecommerce platforms and other software. So, are all theming experiences the same? Obviously not. This talk aims to promote discussion about best practice in theming/templating/skinning, with a view to leaving us techies all more enlightened. Richard Carter, Creative Director at Peacock Carter Ltd, takes us through a selection of popular open source software packages and the ups, downs and total cock-ups he’s seen along the way."

Javascript is evil - fronteers 2013 jam sessionsWilfred Nas

Rails, Postgres, Angular, and Bootstrap: The Power StackDavid Copeland

Diseño de Sistemas de Diseño con Atomic Design y Pattern LabMauricio Angulo Sillas

jQuery 實戰經驗講座Jace Ju

Private slideshowsblackman

Gutenberg Blocks Development for Programmers with no timeMauricio Gelves

jQtouch, Building Awesome WebappsHome

This document provides information about jQtouch, a jQuery plugin for developing mobile web applications. It includes sections about features like geolocation, screen rotation, CSS3, HTML5, custom animations and more. It also includes examples of apps built with jQtouch and tips for things like disabling scrolling, stopping and starting animation events, iPhone 4 specific CSS, and iPhone 4 background optimization. The document is intended to demonstrate how to build mobile web apps using jQtouch.

引き出しとしてのDjango - SoozyCon7makoto tsuyuki

Drupal SecurityRan Bar-Zik

This document discusses security best practices for Drupal websites. It covers common attacks like XSS and CSRF, how to prevent them, and important security measures like input sanitization, output escaping, and use of tokens. It emphasizes that both server and application security are important, and provides examples of vulnerabilities in Drupal code as well as mitigation techniques like filters, validation, and updating modules.

Technical Preview: The New Shopware AdminPhilipp Schuch

Blogs como gerenciarRosemeireDomingues

The document provides instructions on how to perform various tasks in a blog, such as changing the wallpaper, posting videos from YouTube and PowerPoint presentations, and adding games and magazines. It recommends downloading programs like RealPlayerSP, Format Factory, and Movie Maker to edit and post videos. It also suggests sites like SlideShare, Google Sites, and MyeBook to upload files and embed them in blogs.

Blogs como gerenciarEdna17

Blogs como gerenciarAndrelma

Blogs como gerenciaremedomimgues

Atomic design con pattern labUX Nights

20110820 header new styleAgentiadeturismInvenio

Div idNelson Dionizio

This document contains JavaScript code for displaying a widget that shows offers or deals from an online retailer. The code inserts a script tag that loads an external JavaScript file, which likely generates and displays the widget dynamically on the page. It specifies parameters like the placement location and width of the widget. The widget code is retrieved from a third party domain to be embedded and rendered on the site.

jQuery Mobile Introduction ( demo on EZoapp )EZoApp

Bootstrap [part 2]Ghanshyam Patel

More Related Content

What's hot (20)

Caja de likesJo Rodriguez

JavascriptJitendra Negi

SuperMondays, July 2011Peacock Carter Ltd

Javascript is evil - fronteers 2013 jam sessionsWilfred Nas

Rails, Postgres, Angular, and Bootstrap: The Power StackDavid Copeland

Diseño de Sistemas de Diseño con Atomic Design y Pattern LabMauricio Angulo Sillas

jQuery 實戰經驗講座Jace Ju

Private slideshowsblackman

Gutenberg Blocks Development for Programmers with no timeMauricio Gelves

jQtouch, Building Awesome WebappsHome

引き出しとしてのDjango - SoozyCon7makoto tsuyuki

Drupal SecurityRan Bar-Zik

Technical Preview: The New Shopware AdminPhilipp Schuch

Blogs como gerenciarRosemeireDomingues

Blogs como gerenciarEdna17

Blogs como gerenciarAndrelma

Blogs como gerenciaremedomimgues

Atomic design con pattern labUX Nights

20110820 header new styleAgentiadeturismInvenio

Div idNelson Dionizio

Caja de likesJo Rodriguez

JavascriptJitendra Negi

SuperMondays, July 2011Peacock Carter Ltd

Javascript is evil - fronteers 2013 jam sessionsWilfred Nas

Rails, Postgres, Angular, and Bootstrap: The Power StackDavid Copeland

Diseño de Sistemas de Diseño con Atomic Design y Pattern LabMauricio Angulo Sillas

jQuery 實戰經驗講座Jace Ju

Private slideshowsblackman

Gutenberg Blocks Development for Programmers with no timeMauricio Gelves

jQtouch, Building Awesome WebappsHome

引き出しとしてのDjango - SoozyCon7makoto tsuyuki

Drupal SecurityRan Bar-Zik

Technical Preview: The New Shopware AdminPhilipp Schuch

Blogs como gerenciarRosemeireDomingues

Blogs como gerenciarEdna17

Blogs como gerenciarAndrelma

Blogs como gerenciaremedomimgues

Atomic design con pattern labUX Nights

20110820 header new styleAgentiadeturismInvenio

Div idNelson Dionizio

Similar to Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges (8)

jQuery Mobile Introduction ( demo on EZoapp )EZoApp

Bootstrap [part 2]Ghanshyam Patel

Jquery mobile2Inbal Geffen

The document discusses features of jQuery Mobile, including: 1. How to add buttons and customize their appearance by modifying data attributes like data-icon, data-theme, etc. 2. How to add a filter to a listview by including the data-filter attribute, automatically adding a search function. 3. Methods for linking between pages, including using different pages in separate files or containing all pages in a single file with divs for each page marked with a unique ID. 4. How to specify transitions when linking between pages using the data-transition attribute.

Bootstrap day4Shais. Net

The document discusses different Bootstrap components for displaying and organizing content, including collapsible elements, tabs, pills, and forms. It provides examples of how to implement collapsible content using Bootstrap collapse, horizontal and vertical tabs/pills using nav classes, and different styles of forms including vertical, inline, and horizontal forms using form classes. Key elements like role="form" and form-control are described for standardizing forms.

JQuery Mobile UIMy own sweet home!

The document discusses the JQuery Mobile framework. It provides an overview and introduction to JQuery Mobile, which is an API based on JQuery for building mobile web sites and applications. It focuses on the mobile user interface and supports HTML5, JavaScript, and most web frameworks. The document then covers setting up the environment for JQuery Mobile and describes key aspects of the framework like pages, dialogs, toolbars, buttons, lists, forms and more.

1.pdfMuhammad325538

Copy of-a-walk-around-westfall-plazahelgawerth

HTML5 and the dawn of rich mobile web applications pt 2James Pearce

This document discusses jQuery Mobile and Sencha Touch, which are frameworks for building rich mobile web applications. It provides an overview of key features of each framework. jQuery Mobile is built on jQuery and uses a modular library approach with markup-driven configuration. It supports features like progressive enhancement, pages, transitions between pages, disabling AJAX loading, back buttons, themes, toolbars, footers, buttons, lists, forms, and touch events. Sencha Touch is a JavaScript framework that supports components, data access and MVC patterns, forms, scrolling, touch events, theming, and charts. It uses an application architecture with stores, models, and views. It supports common UI elements like lists, nested

jQuery Mobile Introduction ( demo on EZoapp )EZoApp

Bootstrap [part 2]Ghanshyam Patel

Jquery mobile2Inbal Geffen

Bootstrap day4Shais. Net

JQuery Mobile UIMy own sweet home!

1.pdfMuhammad325538

Copy of-a-walk-around-westfall-plazahelgawerth

HTML5 and the dawn of rich mobile web applications pt 2James Pearce

More from Al-Mamun Sarkar (20)

01 Introductions to System DesignAl-Mamun Sarkar

This document provides an introduction and agenda for a system design presentation. It will cover topics such as the SDLC process, database modeling, SQL vs NoSQL databases, database scaling techniques like sharding and replication, technologies like MySQL, MongoDB and Cassandra, architectural patterns including microservices and caching, and approaches like serverless computing. The presentation will explore these concepts at a high level to provide an overview of considerations for system design.

Introduction to machine learningAl-Mamun Sarkar

Software Development Life Cycle (SDLC)Al-Mamun Sarkar

The document discusses the Software Development Life Cycle (SDLC), which is a process used for software projects within organizations. It describes the typical 7 phases of the SDLC: requirements collection and analysis, feasibility study, design, coding, testing, installation/deployment, and maintenance. Each phase is explained in 1-2 sentences. The document also briefly discusses the waterfall model design process and common problems in software development projects before introducing agile methodologies like SCRUM.

Understanding Wordpress Plugn and Theme users' behaviorAl-Mamun Sarkar

This document discusses understanding user behavior to improve products. It explains that user behavior refers to how users interact with a product. Understanding user behavior can help find problems, improve updates, increase marketing, installations, sales and decrease deactivations. Key things to understand include active installations, users, sites, versions, locales and deactivations. Appsero provides analytics and insights into this user behavior data as well as reasons for plugin deactivations.

Database Management - Lecture 4 - PHP and MysqlAl-Mamun Sarkar

Database Management - Lecture 3 - SQL Aggregate Functions, JoinAl-Mamun Sarkar

Database Management - Lecture 2 - SQL select, insert, update and deleteAl-Mamun Sarkar

Database Management - Lecture 1 Al-Mamun Sarkar

PHP Lecture 6 - Php file uploadingAl-Mamun Sarkar

PHP Lecture 5 - Date time, Include, sessionAl-Mamun Sarkar

This document provides an overview of key PHP concepts including date and time functions, debugging with var_dump(), includes and requires to include files, and sessions to store and retrieve data across multiple pages. Specifically, it demonstrates how to output the current date and time in a specified format using date(), debug variables with var_dump(), include and require other files, and use sessions to store and retrieve values with session_start(), $_SESSION, and session_destroy().

PHP Lecture 4 - Working with form, GET and Post MethodsAl-Mamun Sarkar

PHP Lecture 3 - FunctionsAl-Mamun Sarkar

PHP Lecture 2 - Conditional Statement, LoopAl-Mamun Sarkar

PHP Lecture 1 - String, Constants, Arrays, OperatorsAl-Mamun Sarkar

PHP is a server-side scripting language that allows developers to work with strings, constants, operators, arrays, and superglobals. It presents an overview of PHP string functions like str_word_count() and strrev(), how to define constants, the different types of operators in PHP like assignment, comparison, and arithmetic, the three types of arrays, and array functions for sorting. The document also lists the PHP superglobal variables that provide information about headers, files, environment variables, cookies, and more.

Web Design Course - Lecture 11 - CSS3, Border radius, Box shadowAl-Mamun Sarkar

This document discusses CSS3 features including border-radius for rounded corners, box-shadow and text-shadow for drop shadows, background properties like background-size and origin, and @font-face for custom web fonts. Examples are provided for border-radius, box-shadow, text-shadow, background-size, background-origin, and background-clip properties to demonstrate how to implement these CSS3 features.

Web Design Course - Lecture 10 - Floating, Align, navigation bar, Image galle...Al-Mamun Sarkar

This document provides information on various CSS techniques including floating elements, aligning text, using pseudo-elements, creating a navigation bar, building an image gallery, and adjusting image opacity. Floating allows elements to wrap text around images while align defines how text is positioned within its container. Pseudo-elements make it possible to style specified parts of an element. The navigation bar and image gallery sections provide headings but no details.

Web Design Course - Lecture 9 - Border, Padding and Margin, DisplayAl-Mamun Sarkar

Web Design Course - Lecture 7 - Basic CssAl-Mamun Sarkar

Web Design Course - Lecture 6 - HTML form and form validationAl-Mamun Sarkar

The document discusses various HTML form elements including text, select, checkbox, radio, textarea and button inputs. It provides examples of how to implement these elements with HTML tags, showing the different input types like text, password, email, number, date and more. Select boxes, radio buttons, checkboxes and buttons are demonstrated along with attributes like name, value, checked and onclick.

Web Design Course - Lecture 5 - iframe, Color, Enities and symbols, Audio and...Al-Mamun Sarkar

This document provides information on web design elements including iframes, colors, entities and symbols, and audio and video. It describes how to add iframes and specify colors in HTML using hex codes or RGB values. It also lists several common entities and symbols that can be used, such as copyright and currency symbols. Finally, it shows code examples for embedding audio and video using the HTML5 <audio> and <video> tags.

01 Introductions to System DesignAl-Mamun Sarkar

Introduction to machine learningAl-Mamun Sarkar

Software Development Life Cycle (SDLC)Al-Mamun Sarkar

Understanding Wordpress Plugn and Theme users' behaviorAl-Mamun Sarkar

Database Management - Lecture 4 - PHP and MysqlAl-Mamun Sarkar

Database Management - Lecture 3 - SQL Aggregate Functions, JoinAl-Mamun Sarkar

Database Management - Lecture 2 - SQL select, insert, update and deleteAl-Mamun Sarkar

Database Management - Lecture 1 Al-Mamun Sarkar

PHP Lecture 6 - Php file uploadingAl-Mamun Sarkar

PHP Lecture 5 - Date time, Include, sessionAl-Mamun Sarkar

PHP Lecture 4 - Working with form, GET and Post MethodsAl-Mamun Sarkar

PHP Lecture 3 - FunctionsAl-Mamun Sarkar

PHP Lecture 2 - Conditional Statement, LoopAl-Mamun Sarkar

PHP Lecture 1 - String, Constants, Arrays, OperatorsAl-Mamun Sarkar

Web Design Course - Lecture 11 - CSS3, Border radius, Box shadowAl-Mamun Sarkar

Web Design Course - Lecture 10 - Floating, Align, navigation bar, Image galle...Al-Mamun Sarkar

Web Design Course - Lecture 9 - Border, Padding and Margin, DisplayAl-Mamun Sarkar

Web Design Course - Lecture 7 - Basic CssAl-Mamun Sarkar

Web Design Course - Lecture 6 - HTML form and form validationAl-Mamun Sarkar

Web Design Course - Lecture 5 - iframe, Color, Enities and symbols, Audio and...Al-Mamun Sarkar

Recently uploaded (20)

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

19 Best B,u,y Verified Cash App Accountshttps://sellsusa.com/product/buy-verified-cash-app-accounts/

An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty

Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...SlidesBrain

Modern Gradient Startup Pitch Deck – PowerPoint Presentation and Google Slides Themes Are you ready to take your startup idea to the next level? 🚀 Whether you're preparing for an investor meeting, a product launch, or simply want to create an unforgettable first impression, our Modern Gradient Startup Pitch Deck is designed just for you. At SlidesBrain, we believe that your presentation is more than just slides – it's your story, your brand, and your future. This Startup Pitch Deck features clean, bold, and modern gradient designs that instantly capture attention. It’s fully editable and compatible with PowerPoint and Google Slides, giving you the flexibility to customize it to your needs. With the perfect blend of professional structure and creative design, this deck is ideal for startups across industries — tech, wellness, e-commerce, SaaS, and more. From problem statements to solutions, team slides to financial projections, every layout you need is covered. 🎨 What You’ll Get: Stunning gradient backgrounds for a modern and sleek look Investor-focused layouts to pitch your idea effectively 100% editable elements — fonts, colors, icons, and images Compatible with both PowerPoint and Google Slides Fully customizable according to your brand identity ✨ Whether you are preparing for a seed funding round, Series A, or even just showcasing your concept, this pitch deck template helps you tell your story in a way that’s visually compelling and professionally impressive. More About SlidesBrain: At SlidesBrain, we provide high-quality, beautifully crafted Free PowerPoint Templates for professionals, startups, entrepreneurs, and creators who want to stand out. Need something even more unique? Our Custom Design Services are available to help you build tailor-made presentations that perfectly reflect your brand's essence. 📩 Want to impress your audience? Let's work together! Contact us for custom solutions or download free templates at [email protected]. #StartupPitchDeck #ModernPresentation #SlidesBrain #GradientDesign #PitchDeckDesign #PowerPointTemplates #GoogleSlidesThemes #StartupPresentation #InvestorPitch #BusinessPresentation #CustomPresentationDesign #TechStartup #StartupSuccess #Entrepreneurship #FreePowerPointTemplates #PresentationInspiration #SlidesDesign #InvestorDeck #CustomSlides #DeckDesign #SaaSStartup #StartupBranding #SeedFundingPitch #BusinessGrowth #SlidesBrainServices #PresentationTemplates

325295919-AAC-Blocks-Seminar-Presentation.pdfshivsin165

DOC-20250121-WA0008._20250121_105938_0000.pptxlaugolac31

Steam-Education-PowerPoint-Templates.pptxandripapa1

Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

Naan mudalvan assignment for students_064143.pptxNaziaFarheen13

Lori Vanzant Portfolio. Please take a look !vanzan01

interpolacrcrdcrdrcrdctctfct frfctfction.pptpawan070201

Presentation for Schoool Management Systemkolay922013

dFdDVWeb_Design_Basics_Presentation.pptxAKSHAYKAMBLE806728

Designing Interactive and Engaging Museum ExhibitsPeach Prime Consultancy

Museums today are moving away from just showing objects to creating fun, hands-on experiences where visitors can touch, play, and learn. They design exhibits based on who will visit, use stories to make people feel connected, and add technology like virtual reality to make things even more exciting. Museums also make sure everyone, including people with disabilities, can enjoy the exhibits. They use games, teamwork, and regular feedback to keep improving, so visiting a museum becomes a fun and memorable adventure for everyone. Visit our website for more info.:https://www.peachprime.in/services/museum-exhibit-design/

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

Emily's slide design 101 - training moduleyourmisswright

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

Templates Wind Generator.pdf ahí. Ais d Ai d fjeremysegundob

19 Best B,u,y Verified Cash App Accountshttps://sellsusa.com/product/buy-verified-cash-app-accounts/

An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty

Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...SlidesBrain

325295919-AAC-Blocks-Seminar-Presentation.pdfshivsin165

DOC-20250121-WA0008._20250121_105938_0000.pptxlaugolac31

Steam-Education-PowerPoint-Templates.pptxandripapa1

Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

Naan mudalvan assignment for students_064143.pptxNaziaFarheen13

Lori Vanzant Portfolio. Please take a look !vanzan01

interpolacrcrdcrdrcrdctctfct frfctfction.pptpawan070201

Presentation for Schoool Management Systemkolay922013

dFdDVWeb_Design_Basics_Presentation.pptxAKSHAYKAMBLE806728

Designing Interactive and Engaging Museum ExhibitsPeach Prime Consultancy

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

Emily's slide design 101 - training moduleyourmisswright

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges

1. WEB DESIGN

2. BOOTSTRAP DROPDOWN1 2 Button Group2 Input Group3 2 Nav4 2 Navbar5 Breadcrumbs6 2 Pagination7 Label8 4 2 Badges9

3. DROPDOWN <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data- toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

4. Button Group <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

5. Input Group <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic- addon1"> </div>

6. Nav <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>

7. Navbar .navbar .navbar-default .navbar .navbar-inverse .navbar-fixed-top

8. Breadcrumbs <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>

9. Pagination <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>

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

11. Badges <a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>

12. THANK YOU

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges

Recommended

More Related Content

What's hot (20)

Similar to Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges (8)

More from Al-Mamun Sarkar (20)

Recently uploaded (20)

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges