I can't figure out how to center align a vertical button group with text in bootstrap, in a single div.
I'll will be grateful if someone throws me an idea on how to approach this.
Here are some images illustrating what I mean
Text on one side of button group:
And on both sides:
Check the example code at CODEPEN
<div class="box">
<span>First Text</span>
<div aria-label="Vertical button group" role="group" class="btn-group-vertical"> <button class="btn btn-default" type="button">Button</button> <button class="btn btn-default" type="button">Button</button>
<button class="btn btn-default" type="button">Button</button>
</div>
<span>Second Text</span>
</div>
I hope this helps you.
Enjoy :)
Related
I have the following code
<div class="modal-footer">
<div class="pagination">
</div>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
where the HTML for the pagination class is set later. This gives me something that looks like this in my modal
Howeer I want the close button to appear below the other elements. I am wondering how to achieve this in CSS, I have already tried using another to contain the button as well as style:block
one of the best ways to do this is flexbox. I highly recommend learning it.
<div class="modal-footer">
<section class="pagination">
<span>1 2 3</span>
<div>
<button>
next
</button>
<button>
last
</button>
</div>
</section>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
CSS :
.pagination{
display:flex;
gap:10px;
}
.modal-footer{
display:flex;
flex-direction:column;
align-items : flex-start;
justify-content:center;
gap:10px
}
You could try using to insert a line break in the HTML:
<div class="modal-footer">
<div class="pagination">
</div>
<br><button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data- dismiss="modal">Close</button>
I am trying to use best practice when designing my application so instead of 'hacking' together something I'm after some advice to start.
I'm using Bootstrap 4.1.3 in my Angular App.
Basically I want my application to show many (8+) buttons across the page when in Extra Large (i.e Desktop) but when in Extra Small (i.e Mobile) I don't want the buttons to just show vertically. I'd like in smaller formats to be able to replace the buttons with a dropdown for ease of use.
Here is my starting code:
<div class="container">
<div class="row">
<div class="col">
<button class="btn btn-danger" type="button">Test Button 1</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 2</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 3</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 4</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 5</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 6</button>
</div>
<div class="col">
<button class="btn btn-danger" type="button">Test Button 7</button>
</div>
</div>
</div>
And here is what the result is:
Extra Large Format
Extra Small Format
As mentioned above, I would like the Extra Small format to no longer show the buttons (because they will get vertically stacked and it is messy), but I've read that using Bootstrap Display Utility is not the best due to doubling up of code etc?
Any thoughts on how to achieve this?
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
I'm trying to make a button that spans 12 columns.
I know how to create a div that is 12 columns as such
<div class="row">
<div class="col-lg-12 well"></div>
</div>
But that only makes the div 12 columns long. If I was to replace the div with a input:button how would I get that to work?
Add the class btn-block and place it inside the 12-column <div>. (Note: this is Bootstrap 2.3.2)
<div class="row"><div class="span12">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div></div>
Why not use <button></button>? (bootstrap3)
<div class='row'>
<button class='btn btn-lg btn-warning col-lg-12' >button</button>
</div>