Bootstrap - select and button next to each other
Following Boostrap syntax :
You should add form-inline class to your form, see the official doc
Official example
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I need two select items next to each other in my form to take up 100% of their parent DIV using Bootstrap
You want to put those inputs into a row, then each input div take up half of the container div using col-*-6 (12 is the maximum set by the grid layout). That is what I did in the follow example:
Code
<div class="container">
<div class="form-group">
<label label-default="" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<div class="row">
<div class="form-group col-lg-6">
<label label-default="" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group col-lg-6">
<label label-default="" for="username">username</label>
<input type="username" class="form-control" id="username"
placeholder="username">
</div>
</div>
<div class="form-group">
<label label-default="" for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Check me out</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
I will add my bootply when it actually saves... but you can copy and paste it into a bootply for now to see demo.
Output
How to place buttons next to each other using css Bootstrap
All the child elements contained inside your .inlinebox wrappers have varying line heights (some specified with relative units and others set with absolute pixel values) and are set to vertical-align: middle by default. As a quick fix specify the line-height and vertical-align properties on the .inlinebox class:
.I3WorkAroundTable { width: 100%; padding: 0; margin: 0;}.I3WorkAroundTableRight { min-width: 180px;}.inlinebox { display: inline-block; *display: inline; line-height: 1; vertical-align: top;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><div class="well"> <table class="I3WorkAroundTable"> <tr> <td> <div class="inlinebox"> <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button> </div> </td> <td class="I3WorkAroundTableRight"> <div class="inlinebox"> <div class="input-group" style="width: 160px"> <input type="text" class="form-control" id="MasterAlternativePhoneNumber" > <span class="input-group-btn"> <button class="btn btn-primary" type="button">Dial</button> </span> </div> </div> <div class="inlinebox"> <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button> </div> </td> </tr> </table></div>Bootstrap: How to place button next to input-group
You could also try the pull-left class.
The classes .pull-left and .pull-right also exist and were previously
used as part of the media component, but are deprecated for that use
as of v3.3.0. They are approximately equivalent to .media-left and
.media-right, except that .media-right should be placed after the
.media-body in the html.
The html:
<div>
<div class="pull-left">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
You can use:
style="margin-right:5px"
to add some spacing after the div, and then the new mark-up would be as follows:
<div>
<div class="pull-left" style="margin-right:5px">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
How to put button next to input Twitter Bootstrap 4?
Option 1 - form-inline class...
<div class="form-inline">
<input class="form-control">
<button class="btn btn-primary">enter</button>
</div>
Also, you can use mr-1 (margin-right) to add a small margin between the input and the button: https://www.codeply.com/go/5XCUJIEvua
Option 2 - table-cell class...
Another option (if you want the input and button to be full width) is to use d-table-cell class..
<div class="d-table-cell w-100">
<input class="form-control">
</div>
<div class="d-table-cell align-middle">
<button class="btn btn-primary">enter</button>
</div>
Option 3 - d-flex class...
Finally, the easiest way may be to simply use d-flex which sets display:flex
<div class="d-flex">
<input class="form-control mr-1">
<button class="btn btn-primary">enter</button>
</div>
Demo of all 3 options:
https://www.codeply.com/go/5XCUJIEvua
how to align bootstrap dropdowns next to each other
This is happening because for .navbar-nav the default flex-direction value is column. Make that as row
Just add in css
.navbar .navbar-nav {
flex-direction: row;
}
OR
Use flex-row helper class for navbar-nav in the html as
<ul class="navbar-nav m-auto se flex-row">
<li class="nav-item dropdown second">
.
.
.
</li>
.
.
.
</ul>
Working Example with first solution.
.second {
display: flex !important;
flex-direction: row;
}
.secon {
font-size: 12px;
margin: 2px !important;
}
.navbar .navbar-nav {
flex-direction: row;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<ul class="navbar-nav m-auto se">
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink1" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Category 1</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink1">
<li>
<a class="dropdown-item cat-item text-white text-center" href="One">One</a>
<a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
<a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
<a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
<a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
</li>
</ul>
</li>
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink2" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Category 2</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink2">
<li>
<a class="dropdown-item cat-item text-white text-center" href="One">One</a>
<a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
<a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
<a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
<a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
</li>
</ul>
</li>
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink3" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Category 3</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink3">
<li>
<a class="dropdown-item cat-item text-white text-center" href="One">One</a>
<a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
<a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
<a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
<a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
</li>
</ul>
</li>
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink4" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Category 4</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink4">
<li>
<a class="dropdown-item cat-item text-white text-center" href="One">One</a>
<a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
<a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
<a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
<a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
</li>
</ul>
</li>
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink5" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Category 5</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink5">
<li>
<a class="dropdown-item cat-item text-white text-center" href="One">One</a>
<a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
<a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
<a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
<a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
</li>
</ul>
</li>
<li class="nav-item dropdown second">
<a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink6" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<strong>Category 6</strong>
</a>
<ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink6">
<li>
<a class="dropdown-item cat-item text-white text-center" href="One">One</a>
<a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
<a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
<a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
<a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
</li>
</ul>
</li>
</ul>
</nav>How can I place 2 buttons next to each other in separate divs with bootstrap?
You can rely on some bootstrap classes to create a flex layout inside services and use margin-top:auto with buttons with no need for extra CSS or HTML changes.
Check this link for more details about class utilities.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" ><script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script><div class="container"> <div class="row text-center"> <a href="#" class="col-md-3 services d-flex flex-column align-items-center"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Website Design & Development</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. </p> <button type="button" class="btn btn-primary mt-auto">Read More...</button> </a> <a href="#" class="col-md-3 services d-flex flex-column align-items-center"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-server fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">Hosting & Domain Management</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <button type="button" class="btn btn-primary mt-auto">Read More...</button> </a> </div>
</div>Related Topics
How to Force Nested List Items to Be The Same Width as Parent List Item
Why Does Ie10 Require The Presence of a P:Hover {} Rule for Transitions to Work on a Pseudo Element
Sass Syntax Highlighting in Visual Studio
How to Select Parent Pseudo-Class from Within Child Using SCSS
Bootstrap 3 Class Visible-Lg Moves Span to a New Line
Wp_Enqueue_Style and Rel Other Than Stylesheet
How to Make a Horizontally Scrollable Cell in a Datatable
Changing Size and Content of Header at Scrolling in Browser with CSS
How to Display a Bullet List Using Ionic Framework
Background Image in Styled Components React
How to Set Super Thin "Font-Weight" (Less Than 100) in CSS
In CSS Use "Display:None" on The Element, But Keep Its ":After"
How to Use SASS Logic Within a CSS 3 Media Query
CSS Takes Effect After Page Has Rendered
What Is The Use of @Namespace in CSS
CSS: Opacity Only Background, Not The Text Inside
How to Use Firebug to Easily Find Which CSS File Defines a Particular Style