I'm trying to set the background-color of card-body in bootstrap 4, however I'm not sure how I can obtain the card-body element as each body has a different parent (I think my understanding of this is correct), is it possible to do this using the below code?
I've put a sample snippet below which shows the paragraphs working, but the cards are not working here:
.bg-alt:nth-child(5n+1){background-color: #5bc0de;}
.bg-alt:nth-child(5n+2){background-color: #ed9c28;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin ">
<div class="card">
<div class="bg-alt">
98787667f
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
45645656u57u5
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
456456456456
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
324234234
</div>
</div>
</div>
</div>
</body>
</html>
The "card-body" is always the ONLY child (never the fifth), as the "nth-child" selector only references immediate siblings.
Try:
.col-xl-2:nth-child(5n+1) .bg-alt {background-color: #5bc0de;}
.col-xl-2:nth-child(5n+2) .bg-alt {background-color: #ed9c28;}
Related
I'm using Bootstrap 3 and trying to solve this what's mocked on the image. I used one row with two cols, and they are next to each other like in the image, but when I resize to mobile I want the right side to fall beneath the left. Any help is appreciated, thank you.
Code sample:
<div className="container">
<div className="row">
<div className="col-xs-4 col-offset-xs-1">
<h1>1</h1>
</div>
<div className="col-xs-4">
<div className="row">
<h1>2</h1>
</div>
</div>
.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 black">
black
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 red">
one
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
two
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
three
</div>
</div>
</div>
</div>
</div>
Bootstrap allows nesting your elements easily, here you go: https://jsfiddle.net/denea/DTcHh/25594/
<div className="container">
<div class="row">
<div class="col-sm-6 col-xs-12" id="first">
<h1>1</h1>
</div>
<div class="col-sm-6 col-xs-12" id="second">
<div class="row">
<h1>2</h1>
</div>
<div class="row">
<h1>3</h1>
</div>
<div class="row">
<h1>4</h1>
</div>
</div>
</div>
and read this: http://getbootstrap.com/css/#grid-nesting
Bootstrap allows for nesting which will provide what you need:
<div class="row">
<div class="col-sm-6">
Left column
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Right column, row 1
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 3
</div>
</div>
</div>
</div>
More info here.
You can achieve this by using flexbox and media query
#media (max-width: 360px) {
.container > .row {
display:flex;
flex-flow: row-reverse wrap;
}
}
Demo: https://jsfiddle.net/xs3joev8/1/
I've got a layout which includes a row with 3 columns. Each column has 3 items listed vertically. I'm using Bootstrap.
<div class="row">
<div class="col-sm-4 ">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com/</div>
</div>
<div class="col-sm-4 appcontainer">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com/</div>
</div>
</div>
When the row collapses at 767 px down to about 400 px the layout feels wrong as the individual columns don't fill the space very well. In that case I would like to have it displayed with the image on the left and the header and url on the right as though it were like this..
<div class="col-sm-4 ">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
Can this be accomplished with css and media queries? Or do I have to dig into some javascript?
It fells like I should be able set something up using display, but I haven't found a magic combination that does anything useful.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (max-width: 400px) {
.col-xs-6 {
width: 100%;
}
}
.row {
margin-top: 15px;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com </div>
</div>
</div>
</div>
</div>
</div>
In second column, I have a read more button, on click of that, text expands & the icons of 1st & 3rd column also comes down which I do not want... Somebody give me a demo template In which If I click the button, then only the icon below to the text div should come down and should not affect the position of other columns icons. I'm using this code...
<div class="grid">
<div class="row">
<div class="groups col-sm-4 col-xs-offset-4 career-description">
<h1>srv</h1>
<button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button>
<h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3>
<p class="brief_Desc_a">
</p>
<p class="det_DescF" ng-show="readMore">
</p>
<a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a>
<a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a>
</div>
</div>
<div class="row career-cards">
<div class="groups col-sm-4">
<div class="future-trnds">
<img class="img-responsive" src="images/Future_trends_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4 col-xs-offset-8">
<div class="related-Careers">
<img class="img-responsive" src="images/Related_careers_v02.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="day-in-life">
<img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="introVideo">
<div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url">
</div>
<h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3>
</div>
</div>
<div class="groups col-sm-4">
<div class="cost-Salary">
<a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary">
<img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary">
</a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div>
</div>
</div>
<div class="groups col-sm-4">
<div class="courses_Colleges">
<img class="img-responsive " src="images/Courses_Colleges_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> -->
<div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="content">
<div class="cont">
<div class="slide-text">
<span>Opportunity & Industries </span>
</div>
<div static-image ></div>
</div>
<div class="cont">
<div class="slide-text">
<span>Cost & salary</span>
</div>
<div class="slide-content">
<!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> -->
<div ></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.border{
border: 2px solid black;
}
.heightWidth{
height: 200px;
width: 200px;
}
</style>
<body>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
your middle section the text part goess here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
</body>
</html>
This will work.
I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?
Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>
You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.
I am having cards which show horizontally. Please see the image to get an idea. When I have a big header, in sm screens the cards inside the columns wrap unevenly.
<div class="col-sm-4" data-ng-repeat="card in cards">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
How to solve this issue?
Option 1
You could use CSS ellipsis like this to append '..' to the heading when it's too long:
.cardHeader {
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;
}
Demo: http://www.bootply.com/115420 (uses panel-heading instead)
Option 2
Another option is to use a clearfix div after every 3 'col-sm-4' div..
Demo: http://www.bootply.com/115421
Related
Bootstrap row with columns of different height
do you use the row class? something like this:
<div class ='row'>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
</div>
Another option, which is slightly more HTML heavy but keeps the boxes/cards responsive:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card biggercard">
<div class="cardHeader">Biggest Header</div>
1
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Second Header</div>
2
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Third</div>
3
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Fourth</div>
4
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">5th</div>
5
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">6th</div>
6
</div>
</div>
</div>
</div>
</div>
</div>
Demo FIddle: http://jsfiddle.net/La3H2/