I want to add some space between 2 buttons. This form is created using bootstrap. Tried a number of tricks but couldn't get what I want. The same page is accessed via mobile too.
Here is my code along with screenshot:
<div class="input-group">
<span class="input-group-btn">
<input type="button" style="border-radius: 10px;" id="button1" class="btn btn-primary btn-lg btn-block" value="My Provider"/>
</span>
<span class="input-group-btn" >
<input type="button" style="border-radius: 10px;" id="button2" class="btn btn-primary btn-lg btn-block" value="Any Provider"/>
</span>
</div>
The problem is Bootstrap's btn-block class.
A block level button spans the entire width of the parent element.
http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Try removing that class from each of your buttons, setting the width of the input-group class to 100% and adding margin after the first button.
input[type=button] {
border-radius: 10px;
width: 47%;
}
.input-group {
display: inline-block;
width: 100%;
}
input[type=button]:first-child {
margin-right: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="button" id="button1" class="btn btn-primary btn-lg" value="My Provider"/>
<input type="button" id="button2" class="btn btn-primary btn-lg" value="Any Provider"/>
</div>
You can add paddings to input-group-btn blocks.
.container {
margin-top: 50px;
}
.input-group-btn-left {
padding-right: 30px;
}
.input-group-btn-right {
padding-left: 30px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="input-group">
<span class="input-group-btn input-group-btn-left">
<input type="button" id="button1" class="btn btn-primary btn-lg btn-block" value="My Provider" style="border-radius: 10px;">
</span>
<span class="input-group-btn input-group-btn-right">
<input type="button" id="button2" class="btn btn-primary btn-lg btn-block" value="Any Provider" style="border-radius: 10px;">
</span>
</div>
</div>
Related
I want to change save button will be first then prev button should be come
<input type="button" class="btn btn-primary float-right mx-3"name="firstprevious" onclick="mprev()" value="Prev">
<input type="submit" class="btn btn-primary float-right order-2"name="register" value="Save">
<div>
<input type="button" class="btn btn-primary pull-right mx-3 prev" name="firstprevious" onclick="mprev()" value="Prev">
<input type="submit" class="btn btn-primary pull-left order-2 save"name="register" value="Save">
</div>
CSS:
div{
display: flex;
}
.save{
order:1;
}
.prev{
order:2;
}
Try to add pull-left to your save button and pull-right to your prev button. Please let me know if it's work. Thanks
<input type="button" class="btn btn-primary pull-right mx-3" name="firstprevious" onclick="mprev()" value="Prev">
<input type="submit" class="btn btn-primary pull-left order-2"name="register" value="Save">
I found some come to make a button that is also an input file with a label :
<label>
Import
<input type="file" hidden>
</label>
So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary" (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
The thing the label is actually a bit shorter than other buttons.
I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">
It works but now the text isn't vertically centered !
Is there a way to make it look like a normal button ?
You can remove the margin of that label like this:
(I would not recommend inline css).
.export {
margin: 0px;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary export">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary " (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
I'm trying to add two buttons on both sides of the search field, so I did this:
<div id="fixtures-filter">
<div class="input-group-btn">
<div class="input-group-prepend"><button type="button" class="btn btn-light" aria-expanded="false" id="countries-btn">Filters</button></div>
<div class="app-search">
<div class="input-group"><input type="text" class="form-control" placeholder="Search..."><span class="mdi mdi-magnify"></span>
<div class="input-group-append"><button type="button" class="btn btn-light" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button> </div>
</div>
</div>
</div>
</div>
the result is really weird:
This is a JSFIDDLE.
Use an append and prepend. Adjust the borders as needed to make the search icon appear inside the input.
<div class="input-group">
<span class="input-group-prepend">
<button class="btn btn-primary" type="button">
Filters
</button>
</span>
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0"><i class="fa fa-search"></i></div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
https://www.codeply.com/go/KJcZWvSsR9
If you are trying to get the filter to be on the same line, you have to move it inside the same parent div as the other inputs:
<div id="fixtures-filter">
<div class="input-group-btn">
<div class="app-search">
<div class="input-group">
<div class="input-group-prepend"><button type="button" class="btn btn-primary" aria-expanded="false" id="countries-btn"><span class="mdi mdi-magnify"></span></button></div>
<input type="text" class="form-control padleft" placeholder="Search...">
<span class="mdi mdi-magnify search-mg"></span>
<div class="input-group-append">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button>
</div>
</div>
</div>
</div>
</div>
CSS added to get the magnifying glass icon to appear in the search input:
#fixtures-filter {
position: relative;
}
span.search-mg {
position: absolute;
z-index: 10;
font-size: 20px;
line-height: 38px;
left: 45px;
}
.padleft {
padding-left: 30px;
}
fiddle: http://jsfiddle.net/5xkbn3o0/
I tried adding container and/or row div classes and also tried to add left position for all. How can I align these elements in a row with no css or minimal css changes ?
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
I am expecting to have [Go][Stop][ .... ][Submit] in same row. Link for the demo repl
Try to add this piece of css:
form {
display: inline;
}
<form> - is a block level element, so it breaks lines before and after itself. You have to make it behave as if it is an inline element to overcome the issue.
form {
display: inline;
}
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
Your form is set to display: block; change it to display: inline-block; and it will work like charm.
form{
display: inline-block;
}
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
Add display: inline-block to your form (.button_to):
.button_to {
display: inline-block;
}
You can also remove that styles with position: left because it's unnecessary.
I'm having trouble trying to align Boostrap buttons and input on one line, having the input stretching horizontally while snuggling against the buttons.
Here are different attempts:
In case #1: button group and input group are in the same column. The input stretches horizontally but it is thrown on the next line.
<h2>#1</h2>
<div class="row">
<div class="col-lg-12">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
In case #2: button group and input group are in two equal columns, but there's a gap between the two.
<h2>#2</h2>
<div class="row">
<div class="col-lg-6">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
In case #3: more column is given to the input group (ratio 3:9), but then half of the button group gets thrown to the next line.
<h2>#3</h2>
<div class="row">
<div class="col-lg-3">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div><!-- /.col-lg-3 -->
<div class="col-lg-9">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-9 -->
</div><!-- /.row -->
In case #4: button group and input group are in the same column, wrapped in an in-line form. Cozy setting, but the input doesn't stretch its feet any more.
<h2>#4</h2>
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
Ideal case: button group and input group share the same line as in #2 and are close together as in #4. In case the screen would be re-sized, I would expect the input to stretch first, before the line gets broken with divs thrown to the next line.
But how can I achieve that? Am I using the wrong forms / layout? Or does the CSS have to be modified to create a new kind of layout?
HTML (case-4)
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
With bootstrap 3.0.2
Additional CSS
.btn-group {
display: inline !important;
}
Fiddle Example
With Bootstrap 3.3.5
.btn-group {
display: inline !important;
}
.form-inline .input-group {
display: flex;
}
.form-inline .input-group .input-group-btn {
display: flex;
}
Fiddle Example
Use flex to let the input grow to take up the rest of the available space:
.flex {
display: flex;
}
input {
flex-grow: 1;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 flex">
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>
<input type="text">
<button>button 5</button>
</div>
You might want to consider something like this or it may get you to where you need to be esp since it takes mobile viewports into account.
Open it up the page to full-width and reduce it.
#myForm .group-change .form-control {
border-radius: 0;
}
#media (max-width: 767px) {
#myForm .group-change {
text-align: center;
display: inline;
}
#myForm .group-change .input-group-btn .btn {
border-radius: 0;
}
#myForm .group-change .input-group-btn .btn-last {
border-radius: 0;
width: 100%;
}
#myForm .group-change .input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 0px;
}
#myForm .group-change .dropdown-menu {
width: 100%
}
}
#media (max-width: 480px) {
#myForm .group-change .input-group-btn>.btn+.btn {
margin-left: 0px;
}
#myForm .group-change .btn {
width: 100%;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container-fluid">
<form id="myForm"> <span class="input-group group-change">
<span class="input-group-btn" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
</span>
<input type="text" class="form-control" id="myInput" placeholder="Text"> <span class="input-group-btn" role="group" aria-label="...">
<button class="btn btn-default btn-last dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Drop <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action
</li>
</ul>
</span>
</span>
</form>
</div>
<hr>