I need to create a search bar that contains a search field, a dropdown and a search button. I've read the material on Bootstrap 4, but I can't achieve what I need with what they show there.
Also, how would I add the "down arrows"?
Thanks.
This code is something where you can start to achieve your requirement.
<div class="container">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
See the results in JsFiddle.
Related
Sorry, I have googled forever and I don't find the answer:
I have downloaded a css-file from Bootswatch and I have put it in my www directory where I have my app.R. Now I want to style my widgets to look like the different options presented at Bootswatch.
For example, to style an actionButton in the secondary button style, I put:
actionButton(
inputId = "action",
class = "btn-success")
How do I apply the more complicated styling source code? For example, for the selectInput widget the source code at Bootswatch is:
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
This corresponds to four different styling options for selectInput. If I want to apply the success styling of the above code to a selectInput, where do I put it: As options to the relevant selectInput? In some header or tags for Shiny? Somewhere else?
I have already put the:
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "mytheme.css"))
In my R-script, but I don't know what to do next. Trying to read up on CSS now.
Edit: An example. My radio buttons right now look like:
I want them to look like:
I'm stupid, just use buttons from here:
https://shinyapps.dreamrs.fr/shinyWidgets/
I have created a navbar with bootstrap. I want the two buttons to align right, but no matter what I apply justify-content-end to, it doesn't work.
My understanding is that d-flex will need to be applied to the container, and then justify-content-end to the items as required, but using that logic (applying it to the navbar div), it doesn't work.
here is a codepen: https://codepen.io/MH092/pen/xxXwzVY
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pr-5" href="#">40k QuickLore</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex pl-1" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class=" nav-item">
<a class="nav-link pr-5" href="#">WTF is 40k</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Imperium
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Xenos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Misc
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<nav class="navbar navbar-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">RIGHT ME</button>
<button class="btn btn-outline-success" type="button">RIGHT ME</button>
</form>
</nav>
You can add display: flex; to you nav-item class and your "right me" divs will be on the right.
But if you want them to be at the very right, you have to change your DOM structure a bit because "right me" are in a li tag wich is not their right place.
I think you should have this structure:
and then add justify-content: space-between; to your parent
You're missing a few closing </li> tags. I'd also suggest not including a nav inside of your nav. Here's a revised codepen with modifications only to your html: codepen.io/maggiecody/pen/poWjZmG.
I am having issues aligning a dropdown menu on the navbar-brand portion of the Bootstrap 4 Navbar. For some reason it is aligning to the top left of the page.
I have tried the following code below and am not sure how to go from there.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WebsiteName
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/>WebsiteName</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Popular Subdomains</h6>
<a class="dropdown-item" href="/">Subdomain 2</a><a class="dropdown-item" href="/">Subdomain 3</a> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="/">All Subdomains</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/two-link/">Two Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
</nav>
just curiosity , are you tring to make your brand is dropdown cause its a big mistake try to read this docs to see how its work
https://getbootstrap.com/docs/4.2/components/navbar/
you can also position your navbar by using float or flex alignment as you wish
I already have a dropdown with the following code:
note: class='bg_r' is in CSS for the background image (url) globe
<span class="bg_r">
Language: <a id="Lang" href="#">DropUpâ–˛</a>
</span>
<div id="language_menu" class="lang_switch_panel">
<div class="lang_switch">
<ul>
<li>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
</div>
The output for above code is as shown in figure 1 below:
Now, I'm doing similar to that(above figure) using bootstrap 4.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag but of no use(its wrong method but i tried).
Following is the code I tried so far:
<span class="bg_r">
Language:
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<!--<span class="bg_r">Language:
<a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</a>
</span>-->
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
The output for the code using bootstrap is as shown in figure 2 below:
How can I override button type with (background) image to get output similar to figure 1?
Thanks in advance.
Add btn-link class to button
Additionally add these styles to center align it
.bg_r {
background-color: aqua;
display: inline-flex;
align-items: center;
}
or add these 2 classes d-inline-flex align-items-center to bg_r span
.bg_r {
background-color: aqua;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<span class="bg_r d-inline-flex align-items-center p-1">
Language:
<button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
You can also use bg-transparent on the button that will remove the background-color from button, but will not remove the focus styles when you click on the button ! So preferably add btn-link class to it only.
The above answer works, or you can also replace this line
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
by
Dropup
I am learning bootstrap 4 navbar but i was not able to understand clearly how to position objects in navbar i want a search box to be placed at the center of navbar and a button on right but i was only able to do it navbar is not getting aligned at center.
<div class="collapse navbar-collapse text-xs-center" id="mynavbar">
<div class="col-lg-4 form-inline navbar-form">
<div class="input-group">
<form class="form-inline my-lg-0">
<input class="form-control " type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item" style="margin-right: 15px;">
<div class="btn-group">
<a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a> <a
class="dropdown-item" href="#">Another action</a> <a
class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
</ul>
</div>
There are different methods for Navbar alignment in Bootstrap 4. One way is to use mx-auto on the content to center (the form)...
<nav class="navbar navbar-expand navbar-light bg-faded">
<div class="navbar-collapse collapse" id="mynavbar">
<form class="form-inline mx-auto">
<div class="input-group my-lg-0">
<input class="form-control " type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn" type="submit">Search</button>
</span>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<div class="btn-group">
<a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a> <a
class="dropdown-item" href="#">Another action</a> <a
class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
But the search form will not be perfectly centered because there is no content in the left, and the form will be pushed slight left by the button on the right.
So in this case, I'd recommend using the flexbox utility classes..
<nav class="navbar navbar-expand navbar-light bg-faded">
<div class="navbar-collapse collapse" id="mynavbar">
<span class="navbar-text w-100"> </span>
<form class="form-inline w-100 justify-content-center">
<div class="input-group my-lg-0">
<input class="form-control " type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn" type="submit">Search</button>
</span>
</div>
</form>
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item">
<div class="btn-group">
<a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a> <a
class="dropdown-item" href="#">Another action</a> <a
class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
Demo of both centering methods