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
There are so many questions on this, but they all seem to just want one item on the left and one on the right, or a button group. All of those are straightforward.
How can I achieve similar to this bootply
but instead of two buttons in the group on the right, two other elements - two divs, or two h3 for example?
Whatever I try these 2 elements always end up vertically stacked and not horizontally aligned in the right side of the footer.
EDIT
#Harinder88 provided this solution which, as you can see, does do what I asked and so I have accepted as the answer as I think in the vast majority of use cases, this is what most people are trying to achieve.
However, you can see that if the text is too long for the column, it gets wrapped and now everything is not on a single line. But I accept that is the compromise of having a responsive design. It just so happens that in my actual use case, that last item cannot be allowed to wrap, so I just have to give it a fixed width to solve that. Thanks #Harinder88.
Now see this example i aligned 2 items horizontal in left and right with 2 methods u can use any 1 of them
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<div class="row">
<div class="col-md-6 col-xs-6">
<p>Left side with col</p>
</div>
<div class="col-md-6 col-xs-6">
<p> Right side with col</p>
</div>
</div>
</div>
<div class="pull-left">
<div class="pull-left">Left side with pull</div>
<div class="pull-right">Right side with pull</div>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
<hr>
you can use pull-right for align div right and pull-left for align div on left side .
if you want to do further partition you can use use same things again.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</div>
<div class="pull-left">
<h4>
Fotter (you can use anything here button code or link tag , you can remove hr tag and use anything you want )
</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
I managed to figure this out by replacing the button groups and the buttons with spans, then it works fine. Everything aligned on one line, 1 item pulled left and 2 pulled right.
<div class="panel-footer">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<span class="pull-right">
<span>Recording - Last updated at x</span>
<span class="trail-status">PUBLISHED</span>
</span>
<h5>x comments
</h5>
</li>
</ul>
</div>
<div class="clearfix">
</div>
</div>
I want to make the whole view linkable.
This is my rewrite rule:
<div class="news_column_wrapper z-depth-1 card">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</div>
This is my view field screenshoot, I want to make the whole box clickable:
I have tried with
<div class="news_column_wrapper z-depth-1 card">
<a href="[path]">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</a>
</div>
but nothing happens. How can I achieve that?
I think it's more an HTML issue than a Drupal one.
The <a> tag is an inline tag, and you have placed <div> tags inside of it. The natural display of the <a> tag will make that, only the text will be clickable.
What you can do is use CSS to make the <a> a block element, therefore, making the clickable zone extend to the whole block.
First add a class to your link:
<a class='block_link'>
<h2>My title</h2>
<div>My content</div>
</a>
Then, in your CSS, make the <a> tag displaying like a block.
a {
display:block;
}
That should do the trick.
I'm trying to create a row of divs (one per day of the week) that each contain a set of buttons for a user's availability for that time slot. However, no matter what I try I can't get the Bootstrap grid to space it evenly. Since there's seven days, I can't evenly divide the 12-space span, so each div is span1. However, in the Bootstrap docs they show this evenly filling the available space. In my example, it always crowds the divs to the left, so everything is cramped instead of taking up the available space.
I have a fiddle here: http://jsfiddle.net/usrwvreL/
Can someone point out the right way to use the grid / fluid row to space these items appropriately?
I find that an easy way to defeat the grid system when faced with this type of challenge is to take advantage of nested rows. Create three columns of size 4,
inside of which you could create three columns of four.
In the first parent column, you could have two child columns. The first child column would be offset using the .col-size-offset-4, which would then be proceeded by a .col-size-4.
The center parent column would have three child columns of size four, and the final parent column would have two child columns of size 4.
<!--This is the parent row-->
<div class="row">
<!--This is a parent column-->
<div class="col-md-4">
<!--Here is the gold. Create nested rows-->
<div class="row">
<!--Here we are offseting this column to produce a centered effect-->
<div class="col-md-offset-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!--The middle parent column-->
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!--The last parent column, farthest to the right
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
Bootstrap uses a 12 box grid system so if you need to divide by seven you could add a custom grid division,
so you can make a selector like .col-seventh{width: calc (100% / 7)}
to extend that you can make a new grid type:
.col-seventh-1{width: 14.285714%;}
.col-seventh-2{width: 28.571428%;}
.col-seventh-3{width: 42.857142%;}
.col-seventh-4{width: 57.142857%;}
.col-seventh-5{width: 71.428571%;}
.col-seventh-6{width: 85.714285%;}
.col-seventh-7{width: 100%;}
Instead you could also use flexboxes css3 property layout (non-bootstrap) to do all this for you!!
I am just wondering it might be a good solution to put the date on an individual line. So that you would just have to align a btn-group with 6 btns.
Why don't you try changing the layout. For say you can show three time buttons per row. The date will be on the top most row but it could be aligned center and the other buttons with time could be in the center as well.
Why can't you put like this?
<div class="container-fluid">
<div class="span1 avail-buttons"><span class="avail-date text-center">2015-02-11</span>
<div class="button-row row-fluid">
<button data-slot="0" type="button" class="avail-button btn btn-danger">08:45 AM</button>
<button data-slot="1" type="button" class="avail-button btn btn-danger">09:15 AM</button>
<button data-slot="2" type="button" class="avail-button btn btn-danger">09:45 AM</button>
<button data-slot="3" type="button" class="avail-button btn btn-danger">10:15 AM</button>
<button data-slot="4" type="button" class="avail-button btn btn-danger">10:45 AM</button>
<button data-slot="5" type="button" class="avail-button btn btn-danger">11:15 AM</button>
</div> </div></div>
<div class="row">
<div class="col-md-6 left" ng-if="">
<a ng-click="" class="btn btn-primary">Edit</a>
</div>
<div class="col-md-6 right" ng-if="">
Reports
</div>
I need to fixed the right div even though the left one is not there due to if condition.Currently it moves to left side when left div hides.I need to avoid that.How can I do that ? Thanks in advance.
You could achive this by adding pull-right class to the right div.
Bootply - DEMO
<div class="container">
<div class="row">
<div class="col-md-6 pull-right" ng-if="">
Reports
</div>
</div>
</div>
The pull-left and pull-right classes are used for float an element to the left or right side:
Float an element to the left or right with a class.!important is
included to avoid specificity issues. Classes can also be used as
mixins. - by Bootstrap
Currently i have this setup on a page, there are three buttons in a button group acting as tab toggle buttons and below them is a bootsrap well having tab pages. Is there a way to have the button group become part of the well, so it sits in the center of the top edge of the well?
I have tried code from here: Bootstrap - Adding legend to well but didnt work.
Here is img of current setup
Code is simple
<div style="text-align:center">
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a style="padding:9px;font-size:16px" href="#tdel" class="btn active" data-toggle="tab">Delegations</a>
<a style="padding:9px;font-size:16px" href="#tind" class="btn " data-toggle="tab">Individuals</a>
<a style="padding:9px;font-size:16px" href="#tobs" class="btn " data-toggle="tab">Observers</a>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane" id="tind">
</div>
<div class="tab-pane" id="tobs">
</div>
<div class="tab-pane" id="tdel">
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/mikeyfreake/CbNfa/2/
Place the buttonset div inside the well div.
Fiddle for reference.
You can also margin-top: -15px; in your CSS sheet to further move it up to sit in the center top part of the well. Hope this helps!