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>
Related
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?
I have a btn-toolbar inside my panel-body, and would like to:
Center the set of buttons
Ensure that on mobile view, three buttons are on top, three are on the bottom.
There are a lot of similar questions out there, and I have tried various potential solutions, but nothing seems to work (text-align: center, margin: 0 auto, etc.). Any help would be appreciated.
http://codepen.io/kli96/pen/vydMgW
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="btn2016">2016</button>
<button type="button" class="btn btn-primary" id="btn2015">2015</button>
<button type="button" class="btn btn-primary" id="btn2014">2014</button>
<button type="button" class="btn btn-primary" id="btn2013">2013</button>
<button type="button" class="btn btn-primary" id="btn2012">2012</button>
<button type="button" class="btn btn-primary" id="btn2011">2011</button>
<button type="button" class="btn btn-primary" id="btn2010">2010</button>
</div>
</div>
</div>
</div>
</div>
</div>
To make sure the buttons are centers you can set the container of the buttons to display: inline-block and that container with text-align: center.
You have 7 buttons, but with the above changes they look ok on mobile.
Here is the CSS you need:
.panel-body {
text-align: center;
}
.btn-toolbar {
display: inline-block;
}
.btn-toolbar .btn {
margin-bottom: 5px;
}
Check the codepen:
http://codepen.io/anon/pen/MbQRrY
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.
I would like to create a grid of buttons much like this one:
After looking at this question How to set up a grid of buttons in bootstrap? I added this in the cssfile:
#channels button {
float: left;
width: auto;
}
And these buttons to the html file:
<div id="channels" className="span12">
<div className="btn-group">
<button type="button" className="btn btn-default" id="channel">
A
</button>
<button type="button" className="btn btn-default" id="channel">
B
</button>
</div>
</div>
However, I am not getting any spacing:
So how can I create such a grid?
Give each button margin, which will space it out. The twitter bootstrap has buttons with a default margin of 0 so that is why there is currently no spacing.
P.S. You should not have two elements with the same id.
.channel{
margin:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="channels" className="span12">
<div className="btn-group">
<button type="button" className="btn btn-default" class="channel">
A
</button>
<button type="button" className="btn btn-default" class="channel">
B
</button>
</div>
</div>
This is because you are not using the ROWS and Cols of bootstrap.
Using a row and col, you can determinate how many columns you want and give them until 12 rows. Like:
<div class="row">
<div class="col-lg-6">
<button type="button" className="btn btn-default" id="channel">
A
</button>
</div>
<div class="col-lg-6">
<button type="button" className="btn btn-default" id="channel">
B
</button>
</div>
</div>
And this gonna give you two buttons separate because you have 6 cols in one button and 6 cols in other buttons. If you want something like the image, you have to:
<div>
<div class="row">
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SAFE
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
FUN
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
FRIENDLY
</button>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SNOW
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
BEACH
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SURFING
</button>
</div>
</div>
</div>
As you can see, we were distribute peer row 3 columns with 4 cols, because 4 * 3 = 12 columns on the Grid System. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
For more about it, please visit http://getbootstrap.com/css/#grid for learn GRID of Bootstrap.
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