alignment of elements in a button - html

I have a bootstrap drop down and on the button, I have a text and an icon. What I want is to align the text all the way to the left and align the icon all the way to the right without having to grid the button with other elements. Thanks in advance.
.dropdown {
display: flex;
width: 40%;
height: 10vh;
border: none;
}
.dropdown button {
font-size: 1.8vw;
color: #ffffff;
width: 100%;
height: 100%;
border: none;
}
.dropdown button i {
font-size: 1.8vw;
margin: auto;
}
.dropdown button::after {
display: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
drop me
<i class="fa-solid fa-angle-down"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Most of your CSS are not needed, you can use some of bootstrap's utility classes to achieve the expected result.
You don't have to use .dropdown button::after{} to remove bootstrap's default dropdown caret. Just remove .dropdown-toggle from the button.
You can then use this d-flex justify-content-between align-items-center class to align the text and the icon.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown">
drop me
<i class="fa-solid fa-angle-down"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Related

How can I remove the space between the dropdown-toggle button and dropdown-menu elements?

Why is there a space between dropdown-toggle button and dropdown-menu?How can I remove this space? The box-shadow hides the space, but when the box-shadow is removed, you can see the space easily. This is the code:
<!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.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.btn, button {
box-shadow: none !important;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Edit: edited the css code to make the space visible easily
To eliminate the gap between the toggle element and the dropdown, apply this CSS. It's a rare case where using !important seems appropriate, since the original styles are applied inline by the Bootstrap script.
Optionally apply some border-radius overrides to visually combine the elements when open.
.dropdown-menu {
transform: translate3d(0px, 38px, 0px) !important;
}
/* optional */
body .dropdown-toggle.show {
border-radius: .25rem .25rem 0 0;
}
body .dropdown-menu {
border-radius: 0 .25rem .25rem .25rem;
}
/* end optional */
.btn,
button {
box-shadow: none !important;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a> </li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.dropdown-menu.show {
transform: translate(0px, 40px);
}
This is what pushes the menu down when you click the toggle

postion fixed navbar overlap other content

i´m trying to add more content under the navbar, but every time i try the navbar overlap the next items, I want fixed to always keep it in sight on the website.
I tried also with the z-index, its not the issue.
I don't know if is something of the bootstrap pre installed stuff but it's driving me crazy.
/* roots and body stuff */
body {
font-family: "Roboto", sans-serif;
color: #1a1818;
}
/* nav bar stuff */
.logo-and-section-container {
width: 100%;
display: flex;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
position: fixed;
}
.navbar-logo-container {
width: 5%;
}
.brand-logo {
width: 80px;
padding-right: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.union-logo-img {
width: 100%;
}
.union-logo-text-for-media-query {
font-size: 0;
}
.section-container {
display: flex;
align-items: center;
margin-left: 40px;
}
.dropdown {
font-size: 1.2rem;
margin-right: 8px;
}
.fa-arrow-right {
font-size: 0.8rem;
margin-right: 2em;
margin-left: 0.3em;
}
.secion-dropdown,
.fa-arrow-right {
color: #1a1818;
text-decoration: none;
transition: all 0.3s ease-out;
}
.secion-dropdown:hover {
text-decoration: none;
color: #e14f17;
}
.secion-dropdown:hover>.fa-arrow-right {
transform: rotate(90deg);
color: #e14f17;
}
.search-bar-container {
width: 45%;
padding-left: 1%;
display: flex;
justify-content: flex-end;
}
.search-bar {
align-self: center;
}
.search-button,
.btn-outline-success {
color: black;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.search-button:hover,
.btn-outline-success:hover {
color: #fff;
background-color: #e14f17;
border-color: #e14f17;
}
#media (max-width: 916px) {
.search-bar-container {
visibility: hidden;
padding-left: 1000000px;
}
.logo-and-section-container {
padding-top: 3rem;
padding-bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.union-logo-img {
width: 10rem;
margin-right: 2em;
margin-bottom: 16px;
}
.navbar-logo-container {
flex-direction: column;
text-decoration: none;
padding-bottom: 1.75rem;
}
.union-logo-text-for-media-query {
font-size: 2rem;
font-weight: 700;
color: #1a1818;
display: flex;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.section-container {
text-align: center;
padding-right: 7%;
}
.fa-arrow-right {
padding-left: 15px;
}
}
/* nav bar stuff ends */
.division-bar {
width: 80%;
height: 2em;
background: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="/union project/style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
<link rel="icon" href="img/Union-U-Orange.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
<title>UNION BINDINGS CO.</title>
</head>
<body>
<!-- nav bar and hearder -->
<div class="logo-and-section-container">
<nav class="navbar-logo-container">
<a class="brand-logo" href="#">
<img src="/union project/img/Union-U-Orange.png" alt="union logo orange" class="union-logo-img" />
<p class="union-logo-text-for-media-query">UNION BINDINGS CO.</p>
</a>
</nav>
<div class="section-container">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">All mountain</a>
<a class="dropdown-item" href="#">Freestyle</a>
<a class="dropdown-item" href="#">Splitboarding</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">100% Focus</a>
<a class="dropdown-item" href="#">Forged Carbon</a>
<a class="dropdown-item" href="#">Jet Fusion Printing</a>
<a class="dropdown-item" href="#">Union Specific Technology</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">International Team</a>
<a class="dropdown-item" href="#">Team Movie</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Size Chart</a>
<a class="dropdown-item" href="#">Disk Fit</a>
<a class="dropdown-item" href="#">How to Set up Your Bindings</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Local Shops</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Distributors</a>
</div>
</div>
</div>
<div class="search-bar-container">
<nav class="search-bar">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0 search-button" type="submit">
Search
</button>
</form>
</nav>
</div>
</div>
<!-- nav bar and hearder ends -->
<div class="division-bar"></div>
</body>
</html>
Replace your body with the below code.
body {
font-family: "Roboto", sans-serif;
padding-top: 80px;
}
.brand-logo {
width: 80px;
padding-right: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.union-logo-img {
width: 100%;
}
.dropdown {
font-size: 1.2rem;
margin-right: 8px;
}
.fa-arrow-right {
font-size: 0.8rem;
margin-right: 2em;
margin-left: 0.3em;
}
.secion-dropdown,
.fa-arrow-right {
color: #1a1818;
text-decoration: none;
transition: all 0.3s ease-out;
}
.secion-dropdown:hover {
text-decoration: none;
color: #e14f17;
}
.secion-dropdown:hover>.fa-arrow-right {
transform: rotate(90deg);
color: #e14f17;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="/union project/style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
<link rel="icon" href="img/Union-U-Orange.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
<title>UNION BINDINGS CO.</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="/union project/img/Union-U-Orange.png" alt="Logo" class="union-logo-img" /></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">All mountain</a>
<a class="dropdown-item" href="#">Freestyle</a>
<a class="dropdown-item" href="#">Splitboarding</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">100% Focus</a>
<a class="dropdown-item" href="#">Forged Carbon</a>
<a class="dropdown-item" href="#">Jet Fusion Printing</a>
<a class="dropdown-item" href="#">Union Specific Technology</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">International Team</a>
<a class="dropdown-item" href="#">Team Movie</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Size Chart</a>
<a class="dropdown-item" href="#">Disk Fit</a>
<a class="dropdown-item" href="#">How to Set up Your Bindings</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Local Shops</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Distributors</a>
</div>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
I have used Bootstrap Navbar toggle with responsive behaviors, with the logo shown on the left and toggler on the right by adding class navbar-expand-lg to the <nav> tag. Also added class fixed-top for fixed navbar. To change the color of navbar refer color schemes.
Most importantly solution for the issue regarding the overlapping of content by the navbar, there needs to be some padding-top for body, which then works perfectly.
See this demo to ensure it is working.

Want to align a dropdown to the right end using css grid

I am learning to use css grid. I want to align a responsive drop down to the right using css grid. I am aware that there would be many ways to get this simple requirement done, but I want to get it done using css grid. I have taken the dropdown code from bootstrap for quick work. Code is below. the dropdown is not aligned to the right extreme. Please help.
/*
#mydiv ul{
text-align:right;
}*/
/*#mydiv ul { list-style:none;}*/
#mydiv {
grid-column-start: 250;
grid-column-end:300;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class = "container" id="mydiv">
<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dropdown-menu-right" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
You have an extra mydiv id on your dropdown link, you should remove it (removed in my example). Otherwise it may mess you up later.
Also, to have more control over where the dropdown appears, you can use columns in the grid and tell the rendering engine which column to place yur element in.
justify-self:end will tell the element to stick to the right edge of the column.
However, this makes the dropdown to be cropped onn the right edge, so you may need to play around with it.
More details on css columns
#mydiv {
display: grid;
justify-content: end;
grid-template-columns: 70% 30%
}
#mydiv ul {
grid-column-start: 2;
grid-column-end: 2;
justify-self: end;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class = "container" id="mydiv">
<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dropdown-menu-right" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
If you are going to use grid then you need to add that property.
Very basic example what may help you is this:
#mydiv {
display: grid;
justify-content: end;
//your old properties
grid-column-start: 250;
grid-column-end:300;
}
Anyway taking into account that for grid it is better to specify rows/cols.

Change bootstrap dropdown background to be just an image

I have a picture in a dropdown/dropup menu that I want to be the full background of the dropdown. I have an image set as the background but as you can see there is still white. How can I make the dropdown solely the image and have the scrollwheel in it?
While I'm at it, how would one go about changing scrollwheel css to be an image and such?
(I made the background green to showcase what I don't want to show)
Dropdown CSS
.dropdown-menu {
width: 100%;
background-image: url('Res/IM/page.png');
background-size: 100% 100%;
background-color: #1e7e34;
}
Relevant Dropdown Code
<div id="inv1" class="dropdown-menu" style="min-height: 35vh; resize: vertical;background-image: url('Res/IM/page.png'); background-size: 100% 100%;" >
<div class="scrollable">
X
<CODE IS HERE AND IRRELEVANT>
</div>
</div>
You mean this one?
.dropdown-menu {
background: url(https://t4.ftcdn.net/jpg/01/08/13/09/240_F_108130971_d2e6YQdGAfERW4p75YuJPQQsGZZXk41D.jpg);
background-size: 100% 100%;
background-color: transparent ;
}
a.dropdown-item {
color: red;
font-weight:bold
}
a.dropdown-item:hover {
background-color: transparent ;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</body>
</html>
.dropdown-menu{
background-image: url('https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size: 100% 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Check this code. I think this will solve your problem. :)

How to replace Bootstrap dropdown-toggle icon with another default icon?

Is there a pure CSS method to replace the caret icon in Bootstrap's dropdown-toggle class? I want it to look like a downward arrowhead or logical-or symbol (∨), like this:
instead of the original downward solid triangle caret. I've found answers for replacing the size of the original icon:
.dropdown-toggle::after {
display: inline-block; /* Default */
width: 0; /* Default */
height: 0; /* Default */
margin-left: .3em; /* Default */
vertical-align: middle; /* Default */
content: ""; /* Default */
border-top: .3em solid; /* caret size */
border-right: .3em solid transparent; /* caret size */
border-left: .3em solid transparent; /* caret size */
}
but I can't figure out a good way to make it an arrowhead. Another question referenced here requires you to manually embed the image in HTML.
You might change the default values to the following:
.dropdown-toggle {
font: 400 1.5rem/1.25 sans-serif;
color: white;
background: purple;
padding: .5em 1em;
}
.dropdown-toggle::after {
display: inline-block;
width: .3em;
height: .3em;
margin: -.3em 0 0 .4em;
vertical-align: middle;
content: "";
border: .3em solid;
border-width: 0 .15em .15em 0;
transform: rotateZ(45deg)
}
<span class="dropdown-toggle">CUSTOMERS</span>
As described in this other SO thread, you can either just remove the current icon and use a <span> or <i> tag to add your own custom/Font Awesome icon like this:
.dropdown-toggle::after {
display: none !important;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" style="background-color: #7c2a8b;">
Customer
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
Or you can skip the css part and just remove the dropdown-toggle class name and add the icon to your html like this:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button type="button" class="btn btn-secondary" data-toggle="dropdown" style="background-color: #7c2a8b;">
Customer
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
Just use FontAwesome
body {
font-family: Arial;
font-size: 13px;
}
.dropdown-toggle:after {
font-family: FontAwesome;
content:"\f107";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="dropdown-toggle">CUSTOMERS</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button style="font-size:24px">CUSTOMERS <i class="fa fa-angle-down"></i></button>
</body>
</html>
code here:http://jsfiddle.net/06ngr298/
In the add icon that you want inside the span tag.
.dropdown-toggle::after {
display: none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
<span>+</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
My 5 cents :) aria-labelledby, attr.aria-labelledby - to have correct connection between a toggler and its popup, [class.dropdown-toggle]="false" - to hide standard icon, aria-haspopup="true" - to keep popup working when clicking ngbDropdownToggle element. And decorate this element in the way you want.
<div class="ellipsis" ngbDropdown container="body" placement="bottom">
<i
class="fas fa-ellipsis-h"
ngbDropdownToggle
aria-haspopup="true"
[class.dropdown-toggle]="false"
id="{{ 'nodeAction_' + node.key }}"
></i>
<div
class="dropdown-menu"
ngbDropdownMenu
attr.aria-labelledby="{{ 'nodeAction_' + node.key }}"
>
<li
class="dropdown-item pointer"
ngbDropdownItem
(click)="onEdit(node.origin.entity.tenant)"
>
{{ 'AbpIdentity::Edit' | abpLocalization }}
</li>
...
if someone still need help about just change button with image and then change icon with src property:
<div className="btn-group shadow-0 dropdown">
<img className="dropdown-toggle my-auto" data-bs-toggle="dropdown" aria-expanded="false" src={icons.ic_setting}/>
<ul className="dropdown-menu">
<ListItemWithImage icon={icons.ic_setting} label={t('settings')}/>
<li><hr className="dropdown-divider" /></li>
</ul>
</div>