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/
Related
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
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 must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
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?
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.