Bootstrap breadcrumbs

Breadcrumbs are a critical piece of website navigation and bootstrap makes it very simple to add beautiful breadcrumbs. <!DOCTYPE html> <html> <head> <title>Bootstrap 3 Breadcrumbs</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <style type="text/css"> #w3m, h1{ margin: 20px; padding: 15px; } </style> </head> <body> <h1> BreadCrumbs in Bootstrap </h1> <div id="w3m"> <ul […]
Continue reading…

Enjoyed this post? Share it!

 
 

Bootstrap Nav Tabs

Below is an example of how to render the bootstrap nav tabs with icons per tab. <!DOCTYPE html> <html> <head> <title>Bootstrap Nav and Nav Tabs</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <style type="text/css"> .w3m{ margin: 25px 50px 75px 100px; } </style> </head> <body> <div class="w3m"> <ul class="nav nav-tabs"> <li class="active"><a href="#"> […]
Continue reading…

Enjoyed this post? Share it!