I'm attempting to create an inline btn-group inside of a column with bootstrap3 classes, but the btn group isn't behaving as expected. Instead of being connected and displayed on the same row, the buttons are being vertically stacked and also appear bigger than they should. Here is a view of what is happening:
btn-group
And the html for this part of the page:
<div class="btn-group">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
Also, no CSS has been applied to the buttons. Any help or suggestions are appreciated, Thanks.
Switch:
<div class="btn-group">
To:
<div class="btn-group-vertical">
Try this:
.btn {
float:left;
}
Related
I have a cshtml file that takes care of displaying two buttons below each other in the upper right corner of the screen. Bootstrap 3.3.4 is used.
Now I need to add text to the left of the first button and I managed to do so with the below code, but any vertical alignment is non-existent, as this image shows:
Preferably I'd have the invisible line on which "This is the text" as it were stands lowered to the bottom border of the first button. The second option is to have the text vertically centered relative to the first button, that would be fine as well. How can I accomplish this with bootstrap 3.3.4?
This is the code:
<div class="pull-right">
<button class="btn btn-default btn-xs" data-bind="click: $root.logout">
<i class="fa fa-power-off"></i>
<span data-bind="translate: 'button-logout'"></span>
</button>
<a class="btn btn-default btn-xs" href="#Url.Action("Index", "Relations", new {Area = "Administration"})">
<i class="fa fa-cog"></i>
<span data-bind="translate: 'button-administration'"></span>
</a>
</div>
<div class="pull-right">
<span>This is the text </span>
</div>
Thanks!
Background:The website I am working on there are several different filters that people can use in order to show only the data they need; basic stuff. To make things look nice since I am not css inclined, I am using bootstrap to make things look clean.
Problem: I can't seem to get the buttons to line up with the right side of the fields. I can make them pull to the very edge of the field set, I can make push/pull them to the general area they should be in, but I can't get them to line up nicely and stay that way regardless of how you rearrange the size of the page window.
JSFiddle: https://jsfiddle.net/v3cugpx1/1/
<div class="form-group col-md-12">
<div class="input-group-btn">
<div class="pull-right">
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Any help would be greatly appreciated.
Cheers!
It's important to match the nesting of columns because of the gutters in the grid, which the other answers remark upon. If you start with the other two answers, it's easy enough to modify them to add the margin between the buttons you're looking for:
<div class="form-group col-md-12">
<div class="col-md-12">
<div class="btn-toolbar col-md-12">
<a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
The only really real addition is the btn-toolbar class to the inner-most div. And for posterity here's the Fiddle.
Don't use .input-group instead use col-sm-* classes to give extra padding multiple times, so that you can match the padding available on all other form elements. And then arrange the buttons inside of it, like:
<div class="form-group col-md-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Have a look at the updated Fiddle.
Hope this helps!
You are using wrapper cols for the inputs. I included one "col-md-12" before the button's "form-group" and another one after it. This way your code stay consistent and you achieve what you want.
<div class="col-md-12"> <----
<div class="form-group col-md-12">
<div class="col-md-12"> <----
<div class="input-group-btn">
Updated Fiddle
I would like to horizontally align some code and a button.
For that, I am using the following code:
<div className="panel-heading">
<h2 className="panel-title headingText">Attributes</h2>
<button type="button" className="btn btn-info btn-sml pull-right" data-toggle="modal" data-target="#newListModal">New List</button>
</div>
However, the two are not aligned(the button is the blue thing at the bottom, I would like it to be more central, just like the text):
How could I align the text and button horizontally?
You can apply Css to fulfill your requirement like this
.panel-heading, .headingText
{
display:inline-block;
padding:10px;
}
<div classname="panel-heading">
<h4 classname="panel-title headingText" style="float:left">Attributes</h4>
<button type="button" style="float:left;padding:10px" classname="btn btn-info btn-sml pull-right" data-toggle="modal" data-target="#newListModal">New List</button>
</div>
This should Work. You can remove padding property
At the moment, I have two buttons. The parent button when clicked displays stuff and a part of that stuff is another button which too can be clicked to uncollapse.
I want the child to be closed when the parent is opened, however I assume there is a conflict and the child is opening due to the parent.
Is there any way I can address both the parent & child collapsible individually?
Parent:
<button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter">
<button id='seemore-button' type='button' class='btn btn-block' data-toggle='collapse' data-target='#seemore'>
</button>
</button>
EDIT:
Here is an example of the issue I have.
I require the secondary collapsible to be CLOSED when the parent is opened so that "yoyo" does not show.
http://www.bootply.com/UhUtCNMRb4
Solved it.
http://www.bootply.com/S9CeJ5zFOn
<div>
<button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter">
<h3>Parent</h3>
</button>
<div id="smxs-filter" class="smxs-filter panel-collapse collapse">
<button id="seemore-button" type="button" class="btn btn-block" data-toggle="collapse" data-target="#seemore">
<h3>Child</h3>
</button>
</div>
<div id="seemore" class="collapse">
yoyo
</div>
</div>
I use Bootstrap 3 and the grid system. I have following HTML to display a sort of navigation.
The problem is my button group cannot be centered. I already tried the built in class "center-block" and different CSS approaches, but failed.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
</div>
</div>
<p class="text-center">Center aligned text.</p>
This will align contents in Bootstrap.
Taken directly from the bootstrap documentation.
You can center the button group div by applying
display:inline-block
Then applying to the parent div
text-align:center
Example here: http://jsfiddle.net/u7g3p/
You can assign text-akign: center; to the class .btn-group
DEMO http://jsfiddle.net/D2RLR/6159/
You can add a class 'text-center' which is bootstrap default class to define text-align:center,
But 'btn-group' class in bootstrap is defined as display:inline-block by default, so width of this div wont be 100% to make your inner links center align.
How to fix -
DOM changes, add class text-center to this div- <div class="btn-group btn-group-lg text-center">
CSS changes -
.btn-group{
width:100% (or) display:block;
}
Just add 'text-center' class to the 'btn-group' parent.
<div class="col-xs-12 text-center">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
Alternatively you can add tag before and after the div
<center>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
</div>
</div>
</center>
Here's a modified link :http://jsfiddle.net/sunilkjt/4bq1f320/
Thanks