I add div using flex display parent of flex display.
HTML:
<div class="d-flex align-items-start flex-column" style="height: 100px;">
start
</div>
<div class="d-flex align-items-end flex-column" style="height: 100px;">
<div class="d-flex justify-content-between align-content-center">
<div>
left
</div>
<div>
right
</div>
</div>
</div>
in action I need to show two div in left and right so add justify-content-between class but this this class doesnt work and not show in left and right. how do fix this problem ?!
demo here
You need to remove "align-items-end" from the parent div of "left and right" then it will work.
EDITED:
The explanation for that is if you are using d-flex on a parent div along with "align-items-end" then what will happen is that the parent div will align all the items to the parent div's flex's end so in this case the items inside of the parent div were aligned to the parent div's flex's "end" and "justify-content-between" wasn't working coz the items were stuck at the parent div "flex's" end. Hope this helps. Thanks.
<div class="d-flex align-items-start flex-column" style="height: 100px;">
start
</div>
<div class="d-flex justify-content-between align-content-center" style="height: 100px;">
<div>
left
</div>
<div>
right
</div>
</div>
I am using Bootstrap to design a webpage. Since many people uses large screens I prefer webpages where the content is centered with some white space on both sides. An example is this page:
https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx
I have tried to make a design like this:
<div class="container-fluid text-center">
<div class="row content">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2 col-md-offset-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
<div class="col-sm-2">
<!--This is added only to get white space on right -->
</div>
</div>
</div>
But I want the page to behave like this page do. When you shrink the page, it will "use" the blank space on left and right before it start to scale the content. I see stackoverflow.com also do this. It to not start to scale the content before the white space on both side are used.
Replace the container-fluid class with container class.
<div class="container">
<div class="row">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
</div>
</div
I need two divs to sit side by side, and inside those divs will be divs that have bootstrap 3 classes. The problem is that when I restrict the left div, for example, to 50% by using col-xs-6, the col-xs-... classes on the child elements then only respond to their parent's width.
For clarity:
The purple divs' widths are based on a percentage of their parent, whereas I'd like them to be the same width as though they were a direct child of container whilst being able to keep them separate (and wrap them) from the other adjacent div (each div labelled col-xs-6 will be rendered from entirely different server-side controls).
NOTE: Ignore the fact I'm styling these for an XS display for now, this is only temporary while I work out the styles then I'll amend them accordingly.
For the three purple divs you would use col-xs-4
http://getbootstrap.com/css/#grid-nesting
The sum of the inner divs should add up to 12
You should add another row internally to create a new instance of your 12 columns. You might want to have a look at what Bootstrap calls Nesting Columns
<div class="container">
<div class="row">
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
</div>
</div>
try this JSFiddle
I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline.
Code : http://bootply.com/82631
What are the missing CSS I should add either to the title, panel heading, or buttons ?
I would start by adding clearfix class to the <div> with panel-heading class. Then, add both panel-title and pull-left to the H4 tag. Then, add padding-top, as necessary.
Here's the complete code:
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
...
</div>
http://bootply.com/98827
I'm a little late to the game here, but the simple answer is to move the H4 AFTER the button div. This is a common issue when floating, always have your floats defined BEFORE the rest of the contents or you'll have that extra line-break problem.
<div class="panel-heading">
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
<h4>Panel header</h4>
</div>
The issue here is that when your floats are defined after other items, the float's top will start at the last line-position of the element immediately before it. So, if the previous item wraps to line 3, your float will start at line 3 too.
Moving the float to the TOP of the list eliminates the issue because there are no previous elements to push it down and anything after the float will be rendered at the top line (assuming there is room on the line for all items)
Example of correct and incorrect ordering and the effects:
http://www.bootply.com/HkDlNIKv9g
You should apply a "clearfix" to clear the parent element. Next thing, the h4 for the header title, extend all the way across the header, so after you apply clearfix, it will push down the child element causing the header div to have a larger height.
Here is a fix, just replace it with your code.
<div class="panel-heading clearfix">
<b>Panel header</b>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
Editted on 12/22/2015 - added .clearfix to heading div
I placed the button group inside the title, and then added a clearfix to the bottom.
<div class="panel-heading">
<h4 class="panel-title">
Panel header
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</h4>
<div class="clearfix"></div>
</div>
Try putting the btn-group inside the H4 like this..
<div class="panel-heading">
<h4>Panel header
<span class="btn-group pull-right">
## Lock
## Delete
## Move
</span>
</h4>
</div>
http://bootply.com/lpXoMPup2d
You are part right. with <b>title</b> it looks fine, but I would like to use <h4>.
I have put <h4 style="display: inline;"> and it seams to work.
Now, I only need to add some vertival align.
In this case you should add .clearfix at the end of container with floated elements.
<div class="panel-heading">
<h4>Panel header</h4>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
<span class="clearfix"></span>
</div>
http://www.bootply.com/NCXkOtIkD6
I've found using an additional class on the .panel-heading helps.
<div class="panel-heading contains-buttons">
<h3 class="panel-title">Panel Title</h3>
<a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>
And then using this less code:
.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}
The h4 element is displayed as a block. Add a border to it and you'll see what's going on. If you want to float something to the right of it, you have a number of options:
Place the floated items before the block (h4) element.
Float the h4 element as well.
Display the h4 element inline.
In either case, you should add the clearfix class to the container element to get correct padding for your buttons.
You may also want to add the panel-title class to, or adjust the padding on, the h4 element.
or this? By using row class
<div class="row">
<div class=" col-lg-2 col-md-2 col-sm-2 col-xs-2">
<h4>Panel header</h4>
</div>
<div class=" col-lg-10 col-md-10 col-sm-10 col-xs-10 ">
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
</div>
</div>
Related to my earlier question
I would like to be able to align the pull-right div to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<div class="pull-right">
<img src="img2">
<img src="img3">
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to get the pull-right (or other div classes) to align to the bottom of the footer-images div class.
If I understand the question right. You just have to make sure you float the elements inside it (the tags). But it will only be aligned from the top if you have different image sizes.
Would be much more easier to give you advice if you can show us an image of what you want to do and what does it look like as of now. (Would be better if you also show the css)