I need to center icons in dropdown. When I have text in dropdown item instead of icon, it is in center, but icon not:
Here is my code:
<div class="btn-group pull-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
Click
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
A
</li>
<li>
<i class="fa fa-th-large"></i>
</li>
<li>
<i class="fa fa-th"></i>
</li>
</ul>
</div>
How to center icons in dropdown?
Thanks
You need to override Bootstrap predefined values using !important. Below is the working snippet
li {
display: inline;
background: red;
position: relative;
padding: 5px 20px!important;
margin: 1px;
}
.dropdown-menu>li>a {
display: inline!important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0px !important;
}
<!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://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group pull-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
Click
</button>
<ul class="dropdown-menu dropdown-menu-right text-center" role="menu">
<li class="text-center">
A
</li>
<li>
<i class="fa fa-th-large"></i>
</li>
<li>
<i class="fa fa-th"></i>
</li>
</ul>
</div>
</body>
</html>
Related
input[type="text"] {
position: relative;
top: 0;
left: 0;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
input[type="text"]:focus {
padding: 1px 1px 1px 2px;
}
.searchInput {
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Between 992px and 1180px of the screen size. The logo and the links called principal are affected by the transition when I click on the input.
This should not happen, I don't know where is the problem, maybe the problem is on the line transition: all? I'm not sure because I don't work much with css.
Why is it happening, and how can I solve it?
It happens because you're targeting the padding of the input and not the actual placeholder, which from what I understand is what you actually want to animate.
So - you'd plug in the ::-webkit-input-placeholder pseudo selector, and apply the transition effect to that.
That would look something like this:
.navbar {width: 100%; height: 100%;}
input[type="text"] {
position: relative; top: 0; left: 0;
}
/*Hit the placeholder of input. not actual input. */
input[type="text"]::-webkit-input-placeholder {
padding-left: 6px;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
/* set padding down since you can't do negative padding */
input[type="text"]:focus::-webkit-input-placeholder {
padding-left: 0;
}
.searchInput{
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MeuCss/cssSearchBar.css">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I have a Navigation with a bell Icon. I would like to add a badge which contains a number on the top right of the Icon (like in a few Android apps). I found some Blogs which accomplish this adding the number in css, but I Need to add the number on the Server side so doing something like this:
<span>$number</span>
Would be better.
The layout Looks like this so far:
<li class="nav-item dropdown">
<a href="#" id="navbar-inquiries-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
<i class="fas fa-bell"></i>
// here add badge????
</a>
<ul class="nav-item dropdown-menu" role="menu" aria-labelledby="navbar-inquiries-dropdown">
<li class="nav-item">
<a class="dropdown-item" href="{{ route('inquiry.index') }}">
Requests
</a>
</li>
</ul>
</li>
FontAwesome has this in their documentation.
Take a look at https://fontawesome.com/how-to-use/svg-with-js and find Layering, Text, & Counters
SVG with JS requires you to use the JS version of FontAwesome. Latest CDN link can be found here: https://fontawesome.com/get-started/svg-with-js
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bell"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>`
You can position the counter using the following classes:
fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right
Can you try this and let me know if it was what you wanted
<i class="fas fa-bell badge-wrapper">
<span class='badge badge-secondary'>21</span>
</i>
Style
.badge-wrapper {
position: relative;
}
.badge {
position: absolute;
top: 0;
right: -5px;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ddd;
}
Favorit
Pesanan
2 Notification
.badge {
position: absolute;
font-size: xx-small;
margin-left: -5px;
margin-top: -10px;
background-color: var(--orange);
color: white;
}
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-3">
<i class="fa fa-bell"><span class='badge badge-pill'>2</span></i> Notification
</li>
</ul>
<h1>Hello, world!</h1>
</body>
</html>
I have started developing a website using bootstrap and it is responsive but only to some extend.
If i minimize the browser, the contents auto-arrange itself but as i keep on minimizing at some point the h1 & p contents stop being responsive.`
<html lang="en">
<head>
<title>NiKuLsAn DeSiGn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-color: black;
}
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 50px; right: 70px;}
.imageAndText .col2 {position: absolute; z-index: 1; top: 200px; left: 150px;}
.imageAndText .col3 {position: absolute; z-index: 1; top: 50px; left: 150px;}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="imageAndText">
<img src="banner1.jpg" class="img-responsive" style="width:100%; height:auto;">
<div class="col">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="col3">
<img src="logo.jpg" alt="logo" />
</div>
<div class="col2">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b><br>A professional skier and a musician.</p>
</div>
</div>
</div>
</div>
</body>
Please help as I am not able to understand what is going wrong.
I have created an example where I have used minimal custom CSS and everything else is wprking using bootstrap framework.. Have a look and ask your queries.
body {
background: url('http://placehold.it/1920x400') no-repeat center center;
background-size: cover;
/* Workaround for some mobile browsers */
min-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #000;
}
.featurette-divider {
margin: 20px 0;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper CustomNavbar">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Logo Goes here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<hr class="featurette-divider">
<div class="container ">
<div class="col-sm-12">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b>
<br>A professional skier and a musician.</p>
</div>
</div>
I do not get to align the brand logo and the text and image icons to the navigation bar to use bootstrap enviroiment.
The problem is the logo is outside botton of the navigation bar and the icon not align with the text.
Please could you help me?
Te code is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Testing</title>
<!-- INCLUDES -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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="http://www.google.es"><img src="assets/images/brandlogo.png"/></a></div>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active marges-opciones-right" ><i class="material-icons" style="font-size: 40px">work</i> Page1<span class="sr-only">(current)</span></li>
<li class="text-options marges-opciones-right"><i class="material-icons" style="font-size: 40px">collections</i> Page2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown marges-opciones-left"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><i class="material-icons" style="font-size: 40px" >face</i><span class="username"> Username </span><i class="material-icons" style="font-size: 40px" >list</i></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon"></span><i class="material-icons">settings</i> preferències</li>
<li><span class="glyphicon"></span><i class="material-icons">lock</i> canviar password</li>
<li class="divider"></li>
<li><i class="material-icons" style="font-size:18px">power_settings_new</i> log out</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The css is default of bootstrap.
Simply add these properties to align them in the same line:
.navbar-default .navbar-nav>li>a {
display: flex;
align-items: center;
justify-content: center;
}
Hope this helps,
Please tell me why the dropdown menu isn't functioning and the fa fa-search icon isn't showing within the search box.
The dropdown menu is not collapsing. And the Search icon from http://fortawesome.github.io/Font-Awesome/icon/search/ doesn't display within the search box as it should.
Your help is highly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="X">
<link rel="icon" href="">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- NAVBAR ============================================== -->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigations</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div> <!-- Ende of Navbar Header -->
<div class="navbar-collapse collapse">
<div class="right-inner-addon pull-right">
<i class="fa fa-search"></i>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<li class="dropdown">
Community <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Social</li>
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
<li>Blog</li>
</ul>
</li>
</ul>
</div> <!-- End of Navbar Collapse -->
</div> <!-- Ende of Navbar Container -->
</div> <!-- End of Navbar -->
</div> <!-- End of Container -->
</div> <!-- End of .navbar-wrapper -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
CSS
/* --- Navbar ----------------- */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.right-inner-addon {
position: relative;
top: 8px;
right: 1px;
height: 3px;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px;
pointer-event: none;
}
/* --- Responsive CSS ----------------- */
#media (min-width: 768px) {
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container{
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
border-radius: 4px;
}
}
For the search issue, you need to put input-group-addon inside like so
<i class="input-group-addon fa fa-search"></i>
or preferably taken from the bootstrap website
<div class="input-group right-inner-addon pull-right">
<div class="input-group-addon">
<i class="input-group-addon fa fa-search">
</div>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
For the dropdown, I am not sure, but my guess would be do you need dropdown class in li
instead of
can you try