I am trying to display the text in the info box on the same line but for some reason each word is on a new line. So that it displays as 'Problems Encountered' one line. I have tried text-align: left.
Here is the view code:
<div class="panel-body">
<a href="~/Employee/Index">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box blue-bg">
<i class="fa fa-user"></i>
<div class="count" style="font-size:50px">#Html.Raw(rows)</div>
<div class="title" style="font-size:large;">Available Drivers</div>
</div>
<!--/.info-box-->
</div>
</a>
<!--/.col-->
<a href="~/Vehicle/Index">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box brown-bg">
<i class="fa fa-truck"></i>
<div class="count" style="font-size:50px">#Html.Raw(rows1)</div>
<div class="title" style="font-size:large">Available Vehicles</div>
</div><!--/.info-box-->
</div><!--/.col-->
</a>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box red-bg">
<i class="fa fa-exclamation-triangle"></i>
<div class="count" style="font-size:50px">#Html.Raw(rows4)</div>
<div class="title" style="font-size:large;">Problems Encountered</div>
</div><!--/.info-box-->
</div><!--/.col-->
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box green-bg">
<i class="fa fa-check"></i>
<div class="count" style="font-size:45px">#Html.Raw(rows3)/#Html.Raw(rows2) </div>
<div class="title" style="font-size:large">Completed Deliveries</div>
</div><!--/.info-box-->
</div><!--/.col-->
</div>
</section>
Related
I am showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</div>
</div>
</div>
My code for this is :
<!-- page content -->
<div class="right_col" role="main">
<c:if test="${not empty menuStructure.menus}">
<div class="row">
<c:forEach var="menu" items="${menuStructure.menus}"
varStatus="menuCounter">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="x_panel tile">
<div class="x_title">
<span style="font-size: 25px; color: #73879C !important; font-
weight:bold; font-size:1.0vw; margin-top:15px; font-weight:
400;">${menu.label}</span>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up">
</i></a>
</li> </ul>
<div class="clearfix"></div>
</div>
<div class="x_content" align="center" >
<a href="${menu.link}"><img
src="${contextPath}/resources/images/${menu.thumbnail}"
alt=""></a>
</div>
</div>
</div>
</c:forEach>
</div>
</c:if>
</div>
<!-- /page content -->
I know that the issue is that all menu tabs are contained in bootstrap class class="row" that's why when last tab of first row is collapsed that space is reclaimed by the tabs below it, but I'm unable to find a solution for this.
Any help will be appreciated. Thanks.
You need to change your structure a bit, like
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
means 12 columns should be in single row, so you wont get above issue
You can use nth-child in css as
.right_col .col-md-3:nth-child(n+4){
clear: both;
}
function alignGrid(){
$(".sp-custom").remove();
var width=$(".row").width()-30;
var temp=0;
$(".row .grid-custom").each(function(index, item) {
temp=temp+$(item).width();
if((width-temp)<$(item).width()){
$(item).after('<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 sp-custom"></div>');
temp=0;
}
});
}
alignGrid();
$( window ).resize(function() {
alignGrid();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:grey;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:green;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightgrey;height:40px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:yellow;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:red;height:80px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:blue;height:10px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:cyan;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightblue;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:black;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:brown;height:100px;">
</div>
</div>
</div>
You can try the above javascript code.
This code will insert div as a separator after the last div in a row.
I'm using bootstrap's collapsible functionality to have a list of stores with expandable information.
The problem is, when I open one of the collapsibles on the left hand column, it pushes some items into the next column. If I open a collapsible on the right hand column, everything slides properly, but it also adds a space on the left hand column. Please see the following plunker. Resize the screen until there are two rows of collapsibles and then click on one in each row to see the two behaviours:
http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview
This is the code I am using:
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
My desired result is to have the collapsible only slide the column that it lives in, and that items do not move onto the next row. Is this possible with Bootstrap's grid system?
Actually there's one simple solution to this if you want it.
Just put <div style="clear:both"></div> after every two col-xs-12 divs. And it will stop pushing the elements after it to the right.
You can see the example here.
Note: Remember, put clear div after every N collapsible div (it should be the same as the column number)
Try to use two separated columns for your panels. Something like this:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-1">
xname-1
</a>
</h4>
</div>
<div id="xname-1" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-2">
xname-2
</a>
</h4>
</div>
<div id="xname-2" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-3">
xname-3
</a>
</h4>
</div>
<div id="xname-3" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-4">
xname-4
</a>
</h4>
</div>
<div id="xname-4" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-5">
xname-5
</a>
</h4>
</div>
<div id="xname-5" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-6">
xname-6
</a>
</h4>
</div>
<div id="xname-6" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
UPD. I've improved my Plinker. Now there are no superfluous repetitions in it. But I must warn you that I do not know Angular well.
http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
<div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
<div class="panel panel-default store-wrapper">
<div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
<h4 class="panel-title">
<a>
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I'm finding it very difficult achieving an L shaped category section with featured ads placed beside the featured ad. I'm using bootstrap because of the responsive nature, its the only option I know.
Please heres SAMPLE IMAGE of what I'm trying to achieve.
Also these are my lines of codes:
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-car fa-5x" style="background-color: #6fbf4e;"></i><br> <center>CARS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-television fa-5x" style="background-color: #556266;"></i><br> <center>ELECTRONICS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-headphones fa-5x" style="background-color: #eb686e;"></i><br> <center>ENTERTAINMENT</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-briefcase fa-5x" style="background-color: #4a8c9c;"></i><br><center>JOBS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-home fa-5x" style="background-color: #1693eb;"></i><br> <center>REAL ESTATE</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-cutlery fa-5x" style="background-color: #fc011f;"></i><br> <center>RESTAURANTS</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-graduation-cap fa-5x" style="background-color: #6fbf4e;"></i><br> <center>EDUCATION</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-wrench fa-5x" style="background-color: #556266;"></i><br> <center>SERVICES</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-calendar fa-5x" style="background-color: #eb686e;"></i><br> <center>EVENTS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-female fa-5x" style="background-color: #4a8c9c;"></i><br><center>FASHION</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-paw fa-5x" style="background-color: #1693eb;"></i><br> <center>ANIMALS & PETS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-plus-circle fa-5x" style="background-color: #fc011f;"></i><br> <center>MORE</div>
</div>
</div>
<div><img class="featured" src="images/Featured-Ad.jpg" ></div>
Please I need help guys, I've been trying to achieve this for too long now but I'm getting nowhere. Thanks
Instead of adding rows in between your categories just have one row and then add your columns inside that row. So add your featured section first then your categories should fall into place. Like so:
Here is a fiddle with some random css and the following markup Fiddle Demo
<div class="container">
<div class="row">
<div class="col-xs-8 col-md-6 featured-section">
<a class="featured" href="#"></a>
</div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
</div>
</div>
I can't seem to make the right CSS selector to change the color of every other Font Awesome icon. After trying many different combinations (putting FA icon in a div, giving it different IDs and classes), this is the last thing I have:
HTML:
<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
<?php if (have_rows('approach_steps')):while(have_rows('approach_steps')):the_row();?>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2"><?php the_sub_field('approach_step');?></h2>
<div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-<?php the_sub_field('approach_icon');?> fa-3x col-xs-12 text-xs-center"></i></div>
<p class="text-xs-left"><?php the_sub_field('approach_description');?></p>
</div>
<?php endwhile; else : endif; ?>
</div>
CSS:
.approachIcon{
color: white;
}
.approachIcon:nth-of-type(2n){
color: #E0991B;
}
If I've understood your for loop properly you'll want something like this:
div.approachBox:nth-child(even) { background-color: #FFFFFF; }
div.approachBox:nth-child(odd) { background-color: #E0991B; }
<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">approach_step</h2>
<div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
<p class="text-xs-left">approach_description</p>
</div>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">approach_step</h2>
<div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
<p class="text-xs-left">approach_description</p>
</div>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">approach_step</h2>
<div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
<p class="text-xs-left">approach_description</p>
</div>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">approach_step</h2>
<div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
<p class="text-xs-left">approach_description</p>
</div>
</div>
Example: https://jsfiddle.net/e74sr6ud/2/
In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords 'even' and 'odd' are just convenient shorthands. For example, for a long list you could do this:
li:nth-child(5n+3) { font-weight: bold }
Source: https://www.w3.org/Style/Examples/007/evenodd.en.html
Looks like it's looping through the whole approachBox:
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<div class="approachIcon col-xs-12">...</div>
</div>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<div class="approachIcon col-xs-12">...</div>
</div>
...
So you should set the selector like this:
.approachBox:nth-child(even) .approachIcon {...}
in bootstrap, as it shown you are using given your classes you need .container and .row classes to wrap .col-*-* more info bootstrap docs
To color each icon you have to select the siblings which are the .col-*-* make them odd and even and finally target the fa class which belongs to font-awesome icon itself
#approachWrapper > div:nth-of-type(2n) .fa {
color: red
}
#approachWrapper > div:nth-of-type(2n+1) .fa {
color: blue
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">test</h2>
<div class="approachIcon col-xs-12"><i class="fa fa-user fa-3x col-xs-12 text-xs-center"></i>
</div>
<p class="text-xs-left">test</p>
</div>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">test</h2>
<div class="approachIcon col-xs-12"><i class="fa fa-user fa-3x col-xs-12 text-xs-center"></i>
</div>
<p class="text-xs-left">test</p>
</div>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2">test</h2>
<div class="approachIcon col-xs-12"><i class="fa fa-user fa-3x col-xs-12 text-xs-center"></i>
</div>
<p class="text-xs-left">test</p>
</div>
</div>
</div>
</div>