- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set a pill menu with Bootstrap
To set a pill menu in Bootstrap, use the .nav nav-pills class in Bootstrap
Example
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class = "container"> <h2>Web Development</h2> <p>The following are the web dev technologies:</p> <ul class = "nav nav-pills" role = "tablist"> <li class = "active"><a href = "#">HTML5</a></li> <li><a href = "#">jQuery</a></li> <li><a href = "#">JavaScript</a></li> <li><a href = "#">CSS</a></li> <li><a href = "#">Ajax</a></li> <li><a href = "#">ES6</a></li> </ul> </div> </body> </html>
Updated on 12-Jun-2020 21:36:42
- Related Questions & Answers
- Set a dropup menu upwards with Bootstrap
- How to create a pill navigation menu with CSS?
- Set Bootstrap badges in active states of pill
- Indicate a tabbed menu with Bootstrap
- Create a tabbed menu with Bootstrap
- Create Dropdown menu with Bootstrap
- Create a tabbed navigation menu with Bootstrap
- Right align a Bootstrap dropdown menu
- Separate links in the dropdown menu with a thin horizontal border with Bootstrap
- Add header to label sections in dropdown menu with Bootstrap
- How to create pill buttons with CSS?
- Set disabled links with Bootstrap
- Set Bootstrap Panel with Footer
- Set Bootstrap Panel with Heading
- Add dropdown menu to buttons using Bootstrap
Advertisements