I'm trying to create a footer with bootstrap rows and columns, and I want to make the footer smaller by reducing the space between rows. I've tried changing the margin and padding of the rows to no avail.
<footer class="footerClass">
<div class="row footerRow">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row footerRow table-condensed">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</footer>
It's likely that your additional classes have caused the spacing issues that you're seeing. I would rewrite your footer in the following way to see if it resolves your issue:
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</div>
</footer>
Also, typically when using bootstrap grids, your column width would add up to 12 for each row. This may have been intentional.
I use the following classes to handle vertical spacing in my designs:
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.boffset { margin-bottom: 2px; }
.boffset1 { margin-bottom: 5px; }
.boffset2 { margin-bottom: 10px; }
.boffset3 { margin-bottom: 15px; }
.boffset4 { margin-bottom: 30px; }
.boffset5 { margin-bottom: 40px; }
.boffset6 { margin-bottom: 60px; }
.boffset7 { margin-bottom: 80px; }
.boffset8 { margin-bottom: 100px; }
.boffset9 { margin-bottom: 150px; }
The minimum width of the media query "col-md-xx" is 992px , Try to apply class with "col-sm-xx". May be You are asking this.
Related
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
I dynamically generate content blocks that can have each individual number of lines. If they are within a 'record-row' ... I want the 'record-second' within that row to have the same height.
This is for example such a block:
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... /* Dynamic content LEFT */ ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... /* Dynamic content RIGHT */ ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
So for example in the following block ... the left 'record-second' has 2 lines and the right 'record-second' has 4 lines:
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
How can I makes sure that the left 'record-second' has the same height as the right 'record-second' and vice versa?
Please keep in mind that they are numerous 'record-row' ... where each record row can have an different height.
Fiddle: https://jsfiddle.net/oLzq2vhs/
To try to help you I used only CSS. The solution I adopted involves the use of flexbox
Bootstrap has different classes to manage flexbox and you can see them here
Since using them would have added several classes to your divs, I decided to use only CSS, so it's easier for you to understand the various additions I've made.
Nothing prevents you from throwing away my CSS rules by managing them using Bootstrap classes (i.e. .d-flex, .h-100, .flex-column, m-0...). The important thing here is understand what's going on and, for my personal opinion, seeing the rules on CSS only is more understandible.
I didn't touch your layout. These are the rules I added:
.form-horizontal,
.record-second,
.record-group {
height: 100%; /*set these div to 100% to take full advantage of flexbox*/
}
.record-group {
display: flex; /* create a flexbox container */
flex-direction: column;
margin: 0;
}
.col-sm-4.record-col {
flex: 0 0 auto; /* the first div can't grow or shrink*/
}
.col-sm-8.record-col {
flex: 1 0 auto; /* the second div can grow to fill all the space*/
}
.row {
background: #f8f9fa;
margin-top: 20px;
padding-bottom: 20px;
/* I added also this line */
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.record-first {
padding-top: 12px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-top: #ffffff medium solid;
border-left: #ffffff 0px solid;
border-right: #ffffff 0px solid;
}
.record-second {
padding-top: 12px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-top: #ffffff medium solid;
border-left: #ffffff 4px solid;
border-right: #ffffff 4px solid;
}
/* --------------------------- */
/* I added these lines of code */
/* --------------------------- */
.form-horizontal,
.record-second,
.record-group {
height: 100%;
}
.record-group {
display: flex;
flex-direction: column;
margin: 0;
}
.col-sm-4.record-col {
flex: 0 0 auto;
}
.col-sm-8.record-col {
flex: 1 0 auto;
}
/* --------------------------- */
/* I added these lines of code */
/* --------------------------- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second ">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal h-100">
<div class="form-group record-group h-100">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
Here's the updated fiddle; https://jsfiddle.net/a3eknLuf/
To achieve this you need to;
Loop through all the .record-rows
When inside, loop through all the .record-second
Check the height of each record second and assign it to a variable if it is greater than the previous.
Loop again through all the .record-second and assign their height.
$(document).ready(function(){
var tallestRecordSecond;
// loop through record rows
$(".record-row").each(function(){
tallestRecordSecond = 0;
// loop through record seconds in this row
$(this).find(".record-second").each(function(){
// assign the tallest record second
if($(this).height() > tallestRecordSecond){
tallestRecordSecond = $(this).height();
}
});
// loop again and assign the height for each
$(this).find(".record-second").each(function(){
$(this).height(tallestRecordSecond);
});
});
});
I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I'm just trying to make fluid responsive layout through <img src="" alt="" /> tags but I made it through background image.
Is there any way to make this layout with img tag ?
XD Example
Front End Code
html,
body {
height: 100%;
width: 100%;
}
.cmd-three-img-container {
margin-bottom: 30px;
height: 250px;
display: flex;
}
.cmd-main-img {
position: relative;
width: 50%;
height: 100%;
margin-left: 5px;
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-img-stacked {
width: 50%;
height: 100%;
}
.cmd-img-overlay {
padding-right: 10px;
padding-top: 10px;
}
.cmd-img-overlay h4 {
float: right;
font-size: 18px;
color: #fff;
}
.cmd-top-img,
.cmd-bottom-img {
width: 100%;
height: calc(50% - 2.5px);
}
.cmd-top-img {
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-left-radius: 4px;
}
.cmd-bottom-img {
background: url(https://i.imgur.com/hxiPgcK.jpg);
background-size: cover;
background-position: center;
border-bottom-left-radius: 4px;
}
.cmd-top-img {
margin-bottom: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
</div>
</div>
You just split the child column within the parent column and add the bootstrap 4 default class d-flex align-items-stretch h-100 stretch the image until column end. set border-radis for corners separately as per your requirement. I hope this example you will find the solution.
.row.eqcol {
padding-right: 10px;
}
.row.eqcol div[class^="col-"] {
padding: 0;
padding-right: 5px;
}
.text-overlay h3 {
font-size: 20px;
color: #fff;
}
.text-overlay {
position: absolute;
font-size: 14px;
top: 5px;
right: 5px;
}
.cmd-three-img-container {
position: relative;
}
.cmd-three-img-container img {
object-fit: cover;
padding-bottom: 5px;
width: 100%;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container my-3">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>