I have some center navigation that has always need to be in center, but that is not problem, the problem i have with some element that has to be always right of that element, how to add that this is what i have for now, it goes in accordian head
Here is boostrap 3 code
<div class="panel-heading">
<h4 class="panel-title text-right">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click Me
</a>
</h4>
</div>
What i need is something like this
The problem is that i dont know how many icons i would have, and they have always need to be at center of panel, and click me need to be at right?
If you want to achieve something like this, it is not very complicated. All you have to do is to set a default bootstrap accordion and set text-center insted of text-right. In this way if you place your icons they will be always aligned to center and after that you will use a <p style="float: right;">Click Me</p> in order to place your Click Me text in the right.
Here is the code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<p style="float: right">Click me</p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
DEMO TEXT HERE.
</div>
</div>
</div>
</div>
As you can see, i used 3 icons in this example, but you can add as many as you want and they all will be center aligned.
Related
Here is my header setup (bootstrap 4):
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
As expected on desktop the logo sits on the left and the button sits on the right.
When on smaller devices I would like the logo and button to align in the center.
I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).
What is the correct way to do this?
An alternate to #cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="//placehold.it/140x30"></div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/Ijl31XHfRT
#TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.
It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.
<header class="d-flex justify-content-center justify-content-lg-between">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/65x65" alt="">
</a>
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</header>
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 currently have a VIEW button to the right of this layout but want to add another ADD button to the right.
You can see an example of this on https://www.fireworkscrazy.co.uk/store_v8/shopdisplayproducts.asp?id=5&cat=Barrages+%2F+Cakes+-+Single and then select the GRID VIEW icon
<div class="desktop_view product-view grid-list-row-view hide" style="">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="featured-prod-widget">
<div class="nailthumb">
[formatimage sub]
[CC_ADD_NEW_FLAG]
</div>
<div class="row product-details">
<div class="col-sm-12">
<h6 class="widget-product-title">[translate cname]</h6>
</div>
<div class="row"></div>
<div class="col-sm-12">
$ <span class="widget-prod-price">[FORMATCUSTOMERPRICE cprice]</span>
</div>
<div class="col-sm-12">
</div>
</div>
**<a href="[formatshopexdlink][add_websesslink]" class="submitbtn pull-left">
VIEW
</a>**
</div>
</div>
</div>
the style .grid-list-row-view .featured-prod-widget .submitbtn affecting your button. it has absolute position. so with same style if you create button with pull-left or pull-right , it will display on same position instead of left or right. you will need to implement some workaround to overcome or remove absolute style.
I'm having a problem with properly formatting my bootstrap panels for printing. The charts being contained within the bootstrap panels overrun the panel border on the right side (only when I print though, everything looks fine on the actual web page) and the charts get split by page breaks. I've tried using print media queries and using page-break-inside and page-break-after but nothing is working (I could be doing it wrong though).
Here is my code utilizing the bootstrap panels. I'm also using Font Awesome for some interactive buttons and I'm using canvasJS for my charts.
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Work Orders by Priority
<a data-toggle="collapse" data-target="#collapse1">
<span class="fa fa-line-chart pull-right panelColBtn rotate"/>
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div>
<div id="chartContainer1" style="height: 450px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">% of Work Requests with Repair Tags
<a data-toggle="collapse" data-target="#collapse2">
<span class="fa fa-line-chart pull-right panelColBtn rotate"/>
</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
<div>
<div id="chartContainer2" style="height: 450px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is what I had tried for my print media query to attempt to resolve the page break issue.
#media print {
div.panel, div.panel-primary {
page-break-inside: avoid !important;
page-break-after: auto !important;
}
}
I checked out this thread before coming here and followed along with it but it seems that the original poster was never able to get it working correctly either.
Printing Twitter Bootstrap correctly
Can anyone shed some light on to how this issue could be resolved?
Here is my problem. As you can see here they have used panel panel-primary, panel panel-green, panel panel-yellow and panel panel-red for the small panel views.
When I use panel panel-primary it is working just fine. But when I use other options, I get weird paled transparent colors. I tried panel panel-warning, panel panel-success and panel panel-danger as well but still the same. Only primary works. Any ideas?
I have 4 of these, exactly same with different text.
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="glyphicon glyphicon-stats" style="font-size:50px;"></i>
</div>
<div class="col-xs-9 text-right">
<div class=></div>
<div><h3>Statistics</h3></div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Show statistics</span>
<span class="pull-right"><i class="glyphicon glyphicon-arrow-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
The other panels except the primary one are not from bootstrap's css. I think they are user written.
Create your own class in your css file.
For example:
.panel-red{
background-color:#D9534F;
}
here is a jsfiddle
http://jsfiddle.net/borka/khaunb3q/