<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
this is sample code.
Is it possible add icon in bootstrap nav tabs like below picture.
I want to add number icon in nav tabs.
Working demo
You would do this with a badge,
<li class="active">Home<span class="badge">140</span></li>
and a little bit of CSS
.nav-tabs .badge{
position: absolute;
top: -10px;
right: -10px;
background: red;
}
Insert your badge and position is relative to the container like this:
.count-badge {
position: relative;
top: -50px;
right: -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">Home
<span class="count-badge badge">140</span>
</li>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
</ul>
</div>
Yes, this is possible in multiple ways. Bootstrap has badges that would be an elegant solution.
<span class="badge">140</span>
Related
I got this code example from w3schools.com:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<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>
If the code will be executed, the contents of the dropdown will be displayed on the bottom part of the Page 1 tab - specifically from its bottom left extending to the right side.
My question is, how can I make the contents of the dropdown of Page 1 tab be displayed from its bottom right extending to the left side?
You can overwrite bootstrap css like this:
.dropdown-menu {
left: auto;
right: 0;
}
I'm doing a drop-down list where, when I hover over a specific element, I should highlight only the selected one, unfortunately the whole list is highlighted in my mind, I know the problem is that in one li there is also a new list to make a drop down menu, Unfortunately, I can not deal with it. It's actual result jsfiddle code
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="teset">Type of driving</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS:
.sub_list, .sub_sub_list {display:none;}
li:hover{
background-color:red;
}
My JS
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
Try using anchor for hover instead of li. It will be simplest and easiest solution. While you can play with code if you want complicated solution...
See below snippet.
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
.sub_list, .sub_sub_list {display:none;}
a:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="teset"><a>Type of driving</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I want to create a menu using class .
The menu created using this class is left aligned.
How can I align this menu to the right?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.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">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>
</body>
</html>
What you are asking for, can be achieved by giving float:right style to your ul
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.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">
<h3>Tabs</h3>
<ul class="nav nav-tabs" style="float:right;">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>
</body>
</html>
but it will make your content of the paragraph to come just beside your menubar. To overcome that just put the p tag out of the divlike this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.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">
<h3>Tabs</h3>
<ul class="nav nav-tabs" style="float:right;">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</body>
</html>
I am not 100% sure what you are going for but all you need is a
float:right;
in your css class I guess.
i have a classic Bootstrap 3 navbar with a dropdown menu (https://getbootstrap.com/examples/navbar/).
I would like the menu dropdown to have the screen height. it's possible ?
Just giving height attribute for this sample may help for this. In-line style css applied for drop-down item.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" style="height:100vh;">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<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>
I use this script to get the solution.
$(document).on("shown.bs.dropdown", ".dropdown", function () {
$(this).children(".dropdown-menu").css("height",screen.height);
})
It's possible to do in CSS?
Currently trying to create a simple dropdown sidebar using bootstrap.
Below is my code in html:
<html>
<head>
<title>Sidebar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<link type="text/css" rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
Here is my common.css:
.row{
background-color:#ffff99;
border:2px solid black;
}
The sidebar won't drop down when I click Item 1 or Item 2. Any idea what went wrong?
Have a look at the basic template on the Bootstrap site
http://getbootstrap.com/getting-started/#template
At the bottom of the HTML block they have referenced two javascript files which you are missing.
You need to include the jquery.js and bootstrap.js.
The dropdowns work with JavaScript, so you need to include that. Try to add bootstrap.min.js to your application by adding
<script src="bootstrap.min.js" type="text/javascript"></script>
to the head section of your page, or just before the closing </body>-tag of the page.
Additionally, you need to add jQuery, which is done the same way, but make sure you include it before the bootstrap script.
Your dropdowns work with JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
background-color: #ffff99;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">
Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">
Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
</html>