I have two button groups containing two buttons each within a toolbar (so 4 buttons total), and want each button to be the same size, and distributed evenly in the parent div (in this case a bootstrap column. Is there a simple way to do this?
JSfiddle: https://jsfiddle.net/jh9sdurg/
The first row is what I am working with: buttons with unequal label lengths, and the second row is an example of how I want it to look, but I can only accomplish that using labels of equal lengths (eg. 'a', 'b', 'c').
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" id="qwerty">a<input id="qwerty" type="radio"></label><label class="btn btn-default" id="lButton1">aa<input id="qwerty" type="radio"></label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" id="qwerty">bbbbb<input id="qwerty" type="radio"></label><label class="btn btn-default" id="qwerty">bb<input id="qwerty" type="radio"></label>
</div>
</div>
</div>
</div>
<div class="col-xs-9" style="background: gray;">
col-xs-9
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row no-gutters">
<div class="btn-toolbar">
<div class="btn-group btn-block-3" data-toggle="buttons">
<label class="btn btn-default btn-block-2 active" id="qwerty">aa<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">aa<input id="qwerty" type="radio"></label>
</div>
<div class="btn-group btn-block-3" data-toggle="buttons">
<label class="btn btn-default btn-block-2 active" id="qwerty">bb<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">bb<input id="qwerty" type="radio"></label>
</div>
</div>
</div>
</div>
<div class="col-xs-9" style="background: gray;">
col-xs-9
</div>
</div>
</div>
You can override Bootsrap styling by using another css file or inline styling.
I went with a simple and quick way to fix this is to add the style = width:50%; on each of the buttons.
They would look something like this:
<label class="btn btn-default active" id="qwerty" style= "width: 50%">a<input id="qwerty" type="radio"></label>
<label class="btn btn-default" style= "width: 50%"id="lButton1">aaa<input id="qwerty" type="radio"></label>
I forgot to add that I wrapped the buttons in a <div class = "col-xs-1"> </div> , if you don't add that then the buttons will fill the <div class = "col-xs-3"></div> that they were originally on.
Like this:
Related
For some reason, my first button has a space before it and I can't get rid of it.
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
This how it looks
This forces the search to go on the next row. How can I fix this?
It's a problem with margins; just make sure you get rid of the left margin. If you're ever in doubt about what a space is, take a peek at the element in dev tools and it'll normally help you out.
div.container {
margin-left: 0px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
I've started to explore Bootstrap 4 and HTML5/CSS in general. I want to create a text area with two buttons on the side (centered horizontally to each other) :
The code I got is the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
</div>
<div class="row">
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
</div>
I've created a row with 2 columns in it. The second column contains two rows.
Is that correct way to go?
Thanks
A better way of doing it with justify-content-around d-flex flex-column on the buttons column. There was no need of additional row element in the col-2 div.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2 justify-content-around d-flex flex-column">
<div>
<button class="btn btn-success btn-sm" type="button">Send</button>
</div>
<div>
<button class="btn btn-info btn-sm" type="button">Clear</button>
</div>
</div>
</div>
I think this method is way better. (:
Use col for the textarea column so that it takes all the available space.
Use col-auto for the buttons column so that it takes as much as space as it needs. And then use d-flex flex-column to change its direction.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-auto d-flex flex-column">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
You should place each button in a div with 'col-...' class.
Bootstrap documentation about nesting elements in a row
Codepen with your example to show you the difference when you use 'col-...' class.
Codepen
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text"
placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-success btn-sm m-1" type="button">Send in col</button>
</div>
</div>
<div class="row">
<div class="offset-6 col-6">
<button class="btn btn-success btn-sm m-1" type="button">Send centered using col</button>
</div>
</div>
</div>
Also making the textarea none-reziable is good.Thus
Try this
textarea.form-control{
resize: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<div class="d-flex flex-column">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
</div>
</div>
Buttons
Here is my code, and i dont know how to place the buttons side to side. (btw I'm new at coding)
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Just put the buttons inside the same form and div
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Since you are using bootstrap, there are a few things you need to know:
.col class will not work without putting the class within .container and .row classes. The other important thing is that the column numeric sizes add up to 12; right now yours add to 20. So your code should look more like this:
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
</div>
</div>
Here is a codepen to show it working
Refer to Bootstrap documentation on grids as well
<div class="row second">
<div class="col-md-4 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
The buttons were in different columns, so it went one line down.
Read more about Bootstrap grid system
Before looking into the answer below, I suggest that you read about boostrap grid system. Each row has 12 columns.
Your first <div> used up 12 columns, and that's why the second button of the second <div> is on the new row/line.
More details can be found here:
Bootstrap: Aligning two buttons on the same row
I have this issue:
The html is as follows:
<div class="row">
<div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
<form class="form">
<input type="text" class="form-control" />
</form>
</div>
<div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
<span class="push-buttons-away-from-search-bar btn-group" role="group">
<a class="btn btn-lg" href="">A link</a>
<a class="btn btn-lg" href="">Another link</a>
</span>
</div>
</div>
Can you think of a responsive (bootstrap) way of making the search bartake up all space it can, and leave space for the 2 buttons on the side.
Notice the spacing between the 2 buttons, the button grouping styling was getting in the way... Perhaps you suggest using button groups?
What you're likely looking for, assuming you're using Bootstrap 3, is Justified Buttons. Red: http://getbootstrap.com/components/#btn-groups-justified
Example:
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Right
</div>
</div>
</div>
JSFiddle: Note that this can be extended to more than one button.
Update
Since you need the input to scale without the buttons scaling, have you tried Segmented Buttons on an Input Group? Ref: http://getbootstrap.com/components/#input-groups-buttons-segmented
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Button One</button>
<button type="button" class="btn btn-default">Button Two</button>
<button type="button" class="btn btn-default">Button Three</button>
</div>
</div>
JSFiddle: Note this won't give you a space between the buttons.
I am attempting to place a input box in a bootstrap 3 button bar but it is not aligned as expected.
<div class="row">
<div class="col-xs-12">
<div class="btn-toolbar text-center">
<div class="btn-group">
<div class="input-group col-xs-3">
<input type="text" class="form-control">
<span class="input-group-addon">$</span>
</div>
</div>
<div class="btn-group">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
</div>
</div>
</div>
It works fine if I use a vanilla input but the buttons in the second btn-group move down to the next row when I attempt to use a input group. Any idea on how I can have them appear on the same row?
Here is a fiddle demonstrating the problem
http://jsfiddle.net/6XST2/
Set the col class to the parent element, the .btn-group. Change this:
<div class="btn-group">
<div class="input-group col-xs-3">
To this:
<div class="btn-group col-xs-3">
<div class="input-group">
Otherwise, the btn-group is filling the whole width.
http://jsfiddle.net/6XST2/3/
try to see this solution
and in this solution you must change the class col-xs-3 to col-xs-12
http://jsfiddle.net/6XST2/1/