How can I align button groups, 3 buttons to the left and another 3 buttons to the right with an input field in the middle in a div.
<div class="container">
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div>
<input type="text" name="textfield" value="">
</div>
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
</div>
Before:
before applying your answer
after applying
This is how I want to arrange them
Flexbox solves your requirement. Learn more here
.container{
display: flex;
align-items: center;
justify-content: space-around;
}
.button-group{
display:flex;
}
<div class="container">
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div>
<input type="text" name="textfield" value="">
</div>
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
</div>
Like this?
.center{
text-align: center;
}
.right{
text-align: right;
}
<div class="container">
<div>
<div class="button-group">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div class="center">
<input type="text" name="textfield" value="">
</div>
<div>
<div class="button-group right">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
</div>
Or do you mean like this?
Source: (Making a flex item float right)
.button-container{
display: flex;
}
.right{
margin-left: auto;
}
.center{
text-align: center;
}
<div class="container">
<div class="button-container">
<div class="button-group left">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
<div class="button-group right">
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-secondary"></button>
</div>
</div>
<div class="center">
<input type="text" name="textfield" value="">
</div>
</div>
Related
Here is my sample form HTML code. In further, I need when click the button in each section the button stays active and it shows red color background. on the other hand, inactive buttons change the grey background color. For example when we click the "print foil thickness" label button 3 then it will active
button 3 and remains 4,5,6,7,8, Best Fit buttons are disabled.
<form id="msform">
<fieldset>
<div class="form-card">
<label class="label-order">Order Set Required:</label>
<div class="btn-group" role="group" aria-label="Kit">
<button type="button" class="btn btn-secondary">Replacement Set</button>
<button type="button" class="btn btn-secondary">Complete Set</button>
</div>
<label class="label-order">Print Foil Thickness:</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">Best Fit</button>
</div>
</div>
<label class="label-order">Print Foil Opening (in mils):</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">Best Fit</button>
</div>
</div>
<label class="label-order">Sphere Diameter To Be Used (in mils):</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">Best Fit</button>
</div>
</div>
</div>
</fieldset>
</form>
Coming from: Twitter Bootstrap Button Text Word Wrap
How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example:
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
returns this:
with the answer from that question (that is duplicated everywhere but the answer is the same everywhere)
.btn{
white-space:normal !important;
word-wrap: break-word;
}
but the expected result is that "Cambio de Nacionalidad" being aligned.
Since you are using BS 4 the col-* are flex items stretched by default so simply use height:100% on the button
.btn {
height:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
I can't get two buttons to stay when possible one next to other aligned at the right side of the panel.
Here is a fiddle with my current solution.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">my panel title</h3>
</div>
<div class="panel-body">
<form action="#" class="form">
<div class="row">
<div class="col-sm-offset-10 col-sm-1">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</div>
<div class="col-sm-1">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
</div>
</form>
</div>
</div>
Put both buttons in a column (col-*-*) and use text-right class to parent div.
<div class="col-sm-12 text-right">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">my panel title</h3>
</div>
<div class="panel-body">
<form action="#" class="form">
<div class="row">
<div class="col-sm-12 text-right">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
</div>
</form>
</div>
</div>
Update your
<div class="col-sm-offset-10 col-sm-1">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</div>
<div class="col-sm-1">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
to
<span class="col-sm-offset-10 col-sm-1">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</span>
<span class="col-sm-1">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</span>
Reason being is that spans can sit side by side whereas divs cannot
Update your row class to :
<div class="row">
<div class="col-sm-offset-10 col-sm-1" style="text-align: right; padding: 0px; ">
<button type="submit" class="btn btn-default" id="btn1" name="btn1" value="1">button1</button>
</div>
<div class="col-sm-1" style="padding-left: 0px; ">
<button class="btn btn-primary" id="btn2" name="btn2" value="2" type="submit">button2</button>
</div>
</div>
For example, see below code, when I resize the browser to very small width, the gird will collapse, so two button groups and text align in vertical, and there is no space between them, how can I add some space?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">
asdf
</div>
</div>
You can set the margin-bottom initially or in the media where it changes like this:
#media (max-width: 991px){
.col-margin{
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8 col-margin">
asdf
</div>
</div>
Check this out for more info about bootstrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
And this for better understanding of media: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use .classname >[class*='col-'] in conjunction with your row to add space or whatever rule to your columns inside that row.
#media (max-width: 991px) {
.col-space >[class*='col-'] {
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row col-space">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">asdf</div>
</div>
</div>
This is what I've tried:
<div class="input-prepend input-append">
<input type="text" />
<div class="add-on btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" dir="ltr">http://</button>
<button type="button" class="btn btn-primary" dir="ltr">https://</button>
</div>
</div>
but the group-button's padding and margin made it ugly! you can see it in jsFiddle
How can I fix it?
Remove add-on from class="add-on btn-group"
Try changing your code to this:
<div class="input-prepend input-append">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" dir="ltr">http://</button>
<button type="button" class="btn btn-primary" dir="ltr">https://</button>
<input type="text" />
</div>
:)