I want the input group to be aligned to left, as it is, and "Add new" button aligned to right of the row.
<div class="row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
</div>
</div>
In action: Bootply
As you can see, input group and "Add new" button are stacked vertically, although they're in a single row.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
</div>
<div class="col-lg-6">
<button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
</div>
</div>
Separete the col-lg-6 and input-group from the div
Bootply : http://www.bootply.com/W8ao9A0a4r
See below. I moved the add new button code right next to your search button. The input is to the left and the add new button is to the right of that. If you want the add new button to hug the right side of the browser, let me know.
<div class="actions row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
</div>
</div>
Using bootstrap3 I would like to set the width of the input type="text" in the input-Group.
I found these two solutions, but in this way I set the total width of all elements and not only the input text width.
.paginator {
width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="paginator">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
bootply
How do I set only the width of the text input with bootstrap?
Thank you
-- EDIT --
I tried to set an inline class for text input as suggested, but this is the result.
bootply edit
Nobody can help me?
Thanks
I'm attempting to have a glyphicon inside of the input field but for some reason it's outside of text box.
<!-- Panel -->
<div class="panel panel-default hidden-xs">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<form>
<p><strong>Enter your number and we'll text you a link</strong></p>
<label class="sr-only">Phone Number</label>
<input class="form-control phone-txt" type="text" placeholder="Phone Number">
<button class="btn btn-submit" type="submit">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</form>
</div>
<div class="col-sm-5">
<p><strong>Or visit an app store to download now!</strong></p>
<a class="btn btn-default btn-lg" href="#">iOS</a>
<a class="btn btn-default btn-lg" href="#">Android</a>
</div>
</div>
</div><!-- End panel -->
It looks like you have that glyphicon attached to the button. You might try something like this...
<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>
I'm using Bootstrap 2.3.2 and I can't seem to get radio buttons to work. I'm using the code from Bootstrap's website:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
What do I need to do from here? With this I get 3 buttons, but clicking them doesn't change them to active and they don't look like they've been clicked.
EDIT:
If I initialize the buttons in JS like so:
$('.btn-group').button();
This markup is generated for the group:
<div class="btn-group ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only" data-toggle="buttons-checkbox"
role="button" aria-disabled="false">
<span class="ui-button-text">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</span>
</div>
Compared to this on the bootstrap website:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary active">Right</button>
</div>
Not sure why it's working different here.
Looking in Bootstrap 2.3.2 doc (see Usage section), you need to initialize your buttons :
$('.btn-group').button();
Working example based on your code
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Make sure to incluse the right class names and attach the stylesheet in the header
I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?
Bootstrap v3 & v4
Use btn-block class on your button/element
Bootstrap v2
Use input-block-level class on your button/element
Why not use the Bootstrap predefined class input-block-level that does the job?
Full-Width Button <!-- BS2 -->
Full-Width Button <!-- BS3 -->
<!-- And let's join both for BS# :) -->
Full-Width Button
Learn more here in the Control Sizing^ section.
Bootstrap / CSS
Use col-12, btn-block, w-100, form-control or width:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
In case some are noticing btn-block not working anymore in bootstrap 5.1+:
It was dropped in bootstrap 5.1 (changelog):
Breaking Dropped .btn-block for utilities. Instead of using .btn-block
on the .btn, wrap your buttons with .d-grid and a .gap-* utility to
space them as needed. Switch to responsive classes for even more
control over them. Read the docs for some examples.
You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
Source: https://getbootstrap.com/docs/5.1/examples/pricing/
If you want to make a stack of block buttons, the official docs recommend the following :
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons
I simply used this:
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
use
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
see: http://getbootstrap.com/components/#btn-groups-justified
You should add these styles to a CSS sheet
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.
In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row"><div class=" col-5 ">
<a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a>
</div><div class="col-5 ">
<a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a>
</div></div>
I would have thought this would be the most bootstrap-esque way of doing things:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12 to the button.
<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.
Update 2022:
You have multiple ways to make button full width.
You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
We can Use a Block Level Full-Width Button
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level button
</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>