I put a dropdown button beside an H1 tag and I want the dropdown button moved up just a bit because they don't look aligned right now.
I'm using Bootstrap 5.1.3
<div class="ps-4 pt-4 pe-4" id="profile">
<div class="dropdown">
<h1 class="d-inline-block display-1">Cheese</h1>
<button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
</div>
</div>
You can use Bootstrap's flexbox class and attributes to align items
https://getbootstrap.com/docs/5.0/utilities/flex/
In this case, I just did center but you can use whatever attribute that gives you the positioning you're looking for.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="ps-4 pt-4 pe-4" id="profile">
<div class="d-flex flex-row align-items-center dropdown">
<h1 class="d-inline-block display-1">Cheese</h1>
<button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
</div>
</div>
Related
What I have:
A navbar, with a group of buttons on the right-hand side.
When the navbar becomes too small (e.g. on a smartphone), the div divides the two buttons up into 2 rows. In that state, I want to align the 2 buttons inside the div to the right side, but no matter what I try, Bootstrap always aligns the items to the left side, as shown in the picture. (outline just for illustration)
Good:
Bad:
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" 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>
<!-- Body -->
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
<div class="">
<a class="btn btn-orange m-1" href="./projects">Projekte</a>
</div>
<a href="./">
<image class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
</a>
<div class="border me-2">
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="mailto:a#bc.de">a#bc.de</a>
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
</div>
</nav>
How can I fix this?
Give the buttons div it's own flex container with d-flex, then add the justify-content-end class (aligns to the right) and flex-wrap class so that they wrap as desired.
More info: https://getbootstrap.com/docs/5.0/utilities/flex/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
<div class="">
<a class="btn btn-orange m-1" href="./projects">Projekte</a>
</div>
<a href="./">
<img class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
</a>
<div class="border me-2 d-flex justify-content-end flex-wrap">
<a class="btn btn-orange m-1" target="_blank" href="mailto:a#bc.de">a#bc.de</a>
<a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
</div>
</nav>
I'm searching to get by search bar that's in a navbar in a dropup menu to go from right to left.
At the moment, my dropup menu is at the far right of my screen just as I want and when I click on my search button, the bar goes off the screen on the right.
I want it to be displayed on the left.
I'm using Bootstrap 5.1
.btn-group {
margin: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="material-icons">
search
<a class="navbar-brand" href="#"></a>
</span>
</button>
<ul class="dropdown-menu">
<div class="form-outline" id="search">
<input type="search" id="form1" class="form-control" placeholder="Trouvez une recette!" aria-label="Search" />
</div>
</ul>
</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>
Use dropdown-menu-end on the dropdown element. See alignment options.
Note that I've corrected your list markup. The only valid child of ul is li.
.btn-group {
margin: 150px; /* demo only *
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="material-icons">
search
<a class="navbar-brand" href="#"></a>
</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<div class="form-outline px-2" id="search">
<input type="search" id="form1" class="form-control" placeholder="Trouvez une recette!" aria-label="Search" />
</div>
</li>
</ul>
</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>
I am using bootstrap to make my navbar right now and the only things I want in my navbar are 3 buttons that when clicked link to other pages. As of right now I have it looking like this:
https://i.stack.imgur.com/31s1f.jpg
As you can see those buttons are all just the size of the text that's in them.
The code is pretty simple for them right now too:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-left">
<button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
</ul>
<ul class="text-center">
<button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
</ul>
<ul class="nav navbar-right">
<button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
</ul>
</div>
</nav>
How can I make the buttons take up the entire navbar? or is there a better way I should be going about this?
Welcome to the community.
flex-grow-1 takes as much space as available.
There are a couple of ways to do so. But I think it is best to use the flex-grow-1 class on the buttons.
It is bugs free, and when there is not enough place for the three on the same line, the line breaks, and they each occupy all the available space.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<button class="btn btn-default flex-grow-1" id="settings" name="settings">SETTINGS</button>
<button class="btn btn-default flex-grow-1" id="settings" name="settings">CREATE A NEW POST</button>
<button class="btn btn-default flex-grow-1" id="settings" name="settings">MY PROFILE</button>
</nav>
https://codepen.io/anon/pen/YOaXwb
Now, since there are three elements with the flex-grow-1 class, their parent's width is divided proportionately between them.
You may use mb-* or my-* class on the buttons to add some margin. If the line breaks, it is good to have same space below the buttons.
https://codepen.io/anon/pen/vzRNWm
If you want that each of the buttons takes 100% width of the nav, use d-block on the nav and w-100 on the buttons.
navbar is flex by default. d-block makes it block
w-100 sets width of buttons to 100%
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-block ">
<button class="btn btn-default w-100 m-1" id="settings" name="settings">SETTINGS</button>
<button class="btn btn-default w-100 m-1" id="settings" name="settings">CREATE A NEW POST</button>
<button class="btn btn-default w-100 m-1" id="settings" name="settings">MY PROFILE</button>
</nav>
https://codepen.io/anon/pen/eLMpJX
You need to use the li element inside the ul element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-dark">
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
</li>
</ul>
</nav>
I am trying to have 3 icons in a navbar at positions left, right and center
The left and right ones are at correct position but the center link is not in the center but towards the left i.e. contiguous with the left glyphicon
Any idea how to center it?
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<a href="/left_link" class="btn btn-info btn-lg pull-left hidelink">
<span class="glyphicon glyphicon-log-out"></span> Left
</a>
<a href="/center_link" class="btn btn-info btn-lg hidelink">
<span class="glyphicon glyphicon-log-out"></span> Center
</a>
<a href="/right_link" class="btn btn-info btn-lg pull-right hidelink">
<span class="glyphicon glyphicon-log-out"></span> Right
</a>
</div>
</div>
Add the text-center class to your container div:
<div class="container text-center">
Bootply example
I would like to align left the text of the buttons on a Twitter Bootstrap Button Group using class text-left.
But, when I put the class in a or div tags (as the first class or the last class) the alignment doesn't change and is always center.
The left align works only if I put a style="text-align: left; on the a tag.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-vertical btn-group-lg" role="group">
<a class="btn btn-default btn-lg" role="button" href="page1.html">Short Text</a>
<a class="btn btn-default btn-lg" role="button" href="page2.html">Long link text</a>
</div>
That's because bootstrap's CSS as by default text-align:center on .btn class, so by inserting the text-left class on the same element, won't affect due to having the same specificity.
Create a custom CSS for that.
.btn-group-lg .btn {
text-align: left
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-vertical btn-group-lg" role="group">
<a class="btn btn-default btn-lg" role="button" href="page1.html">Short Text</a>
<a class="btn btn-default btn-lg" role="button" href="page2.html">Long link text</a>
</div>