CSS - My bootstrap columns aren't breaking correctly - css

I have a list which looks like this:
https://codepen.io/Insane415/pen/QgbQvv
but somehow the columns aren't breaking correctly when resizing the window. I want to keep it readable when someone access my page with a smartphone or other small devices.
Any help would be appreciate
(reduced code)
HTML
<ol class="product-list">
<div class="row">
<div class="col-md-3">
<li>
<div class="row vertical-center">
<div class="col-lg-4 col-md-12 col-xs-12 text-right">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
</div>
</li>
<li>
<div class="row vertical-center">
<div class="col-lg-4 col-md-12 col-xs-12 text-right">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
</div>
</li>
</div>
<div class="col-md-6 large-image-holder">
<img class="image-large" src="http://via.placeholder.com/500x400"/>
</div>
<div class="col-md-3">
<li>
<div class="row vertical-center">
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="col-lg-4 col-md-12 col-xs-12 text-left">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
</div>
</li>
<li>
<div class="row vertical-center">
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="col-lg-4 col-md-12 col-xs-12 text-left">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
</div>
</li>
</div>
CSS
body {
counter-reset: counter;
}
.circle-number {
counter-increment: counter;
}
.circle-number:after {
content: counter(counter);
}
.product-list{
padding-left: 50px;
padding-right: 50px;
}
.product-description{
display: block;
}
img{
margin-top: 15px;
}
li{
/*display: inline-block;*/
list-style-type: none;
border-bottom: 2px solid #47c9e5;
padding-bottom: 20px;
margin-top: 10px;
}
.large-image-holder{
text-align: center;
object-fit: cover;
}
.image-large{
object-fit: cover;
width: 100%;
}
.circle{
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #47c9e5;
max-width: 70px;
max-height: 70px;
}
.circle-number{
font-size: 45px;
color: white;
}
.vertical-center{
display: flex;
align-items: center;
justify-content: center;
}
.image-holder{
text-align: center;
}
li:last-child{
border-bottom: none;
}

Related

CSS vertically space even divs in IE 11

I was creating a layout which worked in the latest updated browsers (Firefox, Chrome, ...) and then opened the layout in IE 11 and saw a difference. My layout in IE looks like this:
But in every other tested browser the space on the right sided divs is evenly between them, which means that the third div stays on the bottom, while the second divs is right in the middle. I can't get it working in IE 11 and hoped that someone from here has a good advice.
https://jsfiddle.net/1gq2cj3f/2/
<article class="col-12 content-wrapper">
<div class="row content-wrapper-materials">
<div class="col-12 col-lg-6 materials-sectors">
<div class="card materials-sectors-general">
<div class="row no-gutters">
<div class="col-12">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="568px" height="430px">
</a>
</div>
<div class="card-img-overlay">
<h3 class="card-title">
Allgemein </h3>
</div>
</header>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 materials-sectors">
<div class="materials-sectors-specific">
<div class="card specific-construction">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-healthcare">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-ict">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
.content-wrapper > div {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding-top: 8rem;
padding-bottom: 8rem;
}
.card > * {
flex: 0 0 auto;
}
.materials-sectors .card-header {
height: 100%;
padding: 0;
border-bottom: 0;
background-color: rgba(242, 241, 241, 1) !important;
}
.materials-sectors .card-image {
height: 100%;
}
.materials-sectors .card-img-top {
-o-object-fit: cover;
object-fit: cover;
}
.materials-sectors-general .card-img-overlay {
bottom: 2rem;
padding: 0.75rem;
}
.materials-sectors .card-img-overlay {
background-color: rgba(255, 255, 255, 0.25);
top: auto;
}
.card-img-overlay > h3 {
font-size: 1rem;
margin-bottom: 0;
}
.materials-sectors-specific {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.materials-sectors-specific > .card {
height: 100%;
}
.materials-sectors-specific .card-image {
display: block;
}
.materials-sectors-specific > div:nth-of-type(2) {
margin-top: 1rem;
margin-bottom: 1rem;
}

How to get div's centered next to each other in this Bootstrap 3 grid?

I have 6 divs, each of which has a specific width in number of pixels. Using Bootstrap 3 I would like to have a maximum of 3 boxes on one row/line. As the screen gets smaller it should move to 2 divs on one line, and when it gets smaller even more just 1 div on a row. How can I do this?
I expected the code below to achieve this.
However, the divs displayed on one row unfortunately are not centered. How to center these divs?
.mainDiv {
margin: 0 auto;
}
.specificWidthInNumberOfPixels {
border: 14px solid #dd5;
width: 160px;
height: 160px;
padding: 15px;
text-align: center;
margin: 5px;
}
.float {
float: left;
display: table;
margin: auto;
}
<div class="mainDiv container-fluid">
<div class="col-xs-12 col-sm-12" style="">
<p style="text-align: center;">Header</p>
</div>
<div class="row" style="max-width: 700px; float: none; display: table; margin: auto; background-color: #000;">
<div class="col-xs-6 col-sm-4 float">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 float">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 float">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 float">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 float">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 float">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
</div>
</div>
Update: In response to this answer: so the answer now produces the visual at the top, but instead what I'm looking for is the visual at the bottom:
If you can use CSS Grid, you're in good shape. Look on codepen to preview it, the code snippet seems like it's acting up:
https://codepen.io/tobyinternet/pen/bGdoBEr
.mainDiv {
margin: 0 auto;
width: 100%;
text-align: center;
}
.row-grid:before, .row-grid:after {
display: none;
}
.row-grid {
margin: 0 auto;
width:100%;
max-width: 500px;
display: grid !important;
grid-template-columns: repeat(auto-fit,160px);
column-gap: 10px;
row-gap: 10px;
justify-content: center;
}
.specificWidthInNumberOfPixels {
border: 14px solid #dd5;
width: 160px;
height: 160px;
padding: 15px;
text-align: center;
}
p {
color: white;
}
<div class="mainDiv container-fluid">
<div class="col-xs-12 col-sm-12" style="">
<p style="text-align: center;">Header</p>
</div>
<div class="row row-grid" style="background-color: #000;">
<div class="col">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
</div>
</div>
You're supposed to wrap them in a container-fluid or container class with a row child element, like so:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="specificWidthInNumberOfPixels">
<p>Text</p>
</div>
</div>
</div>
</div>
This will display 1 row of 3 columns. Add a second row within the container div with the same 3 columns to display a second row of 3 columns

How to adjust margins creating a Dashboard with css and Bootstrap

I am creating an admin Dashboard with Bootstrap but I can't get the margins of the sidebar and the main panel to work correctly. Is hardcoding the margins in a .css file the way this is normally done? For example, once I have the top bar, should I use margin-top for the sidebar on the left with the value of the top-bar height?
The reason I'm asking is that if I margin-top the main panel with the same value, which is reasonable, the sidebar is also dropping even more. Also, I'm not sure how to set the margin on the left of the main panel. Styling is driving crazy.
Here's a picture of what I just said.
.sidebar {
position: absolute;
height: 100%;
margin-top: 55.6px;
}
.options-container {
margin-top: 56px;
margin-left: 780px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<main role="main" class="container container-fluid options-container bg-light">
<div class="row">
<div class="option col-sm-3">
<div class="card card-block bg-light">
<h4>Add Player</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-secondary">
<h4>Add Team</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-warning">
<h4>Add Competition</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-danger">
<h4>Add Referee</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-info">
<h4>Add Stadium</h4>
</div>
</div>
</div>
</main>
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="list-group">
<h5 class="players-title">Players</h5>
<label class="player-item" *ngFor="let player of players" (click)="onSelect(player)">
<span class="badge">{{player.id}}</span> {{player.name}}
<app-player-detail [player]="selectedPlayer"></app-player-detail>
</label>
</div>
</nav>
Ok so you have a lot of work to do to rebuild this as there's a few issues, you didn't give me all your styling so I made my own:
* {
padding: 0px;
margin: 0px;
}
.sidebar {
height:100vh;
display:inline-block;
float:left;
background: green;
padding: 20px;
margin-right: 20px;
width: 20%;
}
.options-container {
width: 72%;
display:inline-block;
margin-top: 20px;
}
.option {
display: inline-block;
margin-right: 10px;
}
.card {
background: yellow;
padding: 10px 20px;
border-radius: 20px;
}
.card h4 {
line-height: 20px;
font-size: 16px;
margin: 0px;
}
<div class="container">
<main role="main" class="container container-fluid options-container bg-light">
<div class="row">
<div class="option col-sm-3">
<div class="card card-block bg-light">
<h4>Add Player</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-secondary">
<h4>Add Team</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-warning">
<h4>Add Competition</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-danger">
<h4>Add Referee</h4>
</div>
</div>
<div class="option col-sm-3">
<div class="card card-block bg-info">
<h4>Add Stadium</h4>
</div>
</div>
</div>
</main>
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="list-group">
<h5 class="players-title">Players</h5>
<label class="player-item" *ngFor="let player of players" click)="onSelect(player)">
<span class="badge">{{player.id}}</span> {{player.name}}
<app-player-detail [player]="selectedPlayer"></app-player-detail>
</label>
</div>
</nav>
</div>
Here's a working codepen: https://codepen.io/danielvickerssa/pen/rvWvaO
By all means this isn't perfect like you should use flexbox for sizing etc. however this solves the issue you had.

center row content in bootstrap grid

I know this question has been asked a lot but each one seems to be a bit unique and I have tried at least 7 different versions here on StackOverflow and none have worked.
It should be a simple fix but I can't center the div contents. I need all the rows centered to the gird and centered when scaled all the way down to the mobile view.
Here is my code example:
http://codepen.io/anon/pen/aOBJEv
Here is the html:
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">cheese </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Cool Beans </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">I am happy </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Hello world! </div>
</div>
</div>
I have added the .row-fluid{...} and div.bottom{...} code blocks to your existing CSS.
.row-fluid {
text-align: center;
}
div.bottom {
display: inline-block;
float: none;
text-align: left;
}
.top {
position: absolute;
top: -5px;
left: 0px;
}
.topic {} .bottom {
position: relative;
top: 0px;
left: 0px;
margin-bottom: 25px;
max-width: 275px;
min-width: 277px;
}
.img-btm {
height: 233px;
width: 228px;
-webkit-border-radius: 233px;
-moz-border-radius: 233px;
border-radius: 233px;
}
.bottom .text-center {
max-width: 275px;
min-width: 277px;
position: absolute;
left: -10px;
top: 18px;
font-size: 18px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">cheese</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Cool Beans</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">I am happy</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Hello world!</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
source: Bootstrap 3 responsive centered columns
Source has no explanation for the code, so
The class .row-fluid has a text-align:center property which makes its contents centered.
Under div.bottom I have the display:inline-block property which is necessary for its parents text-align property to work; float:none overrides the default float:left and text-align:left is a fix for center positioning the image inside the column div, because there was some padding to the element.

Vertically center text in container

I have a jsfiddle here - http://jsfiddle.net/gomwyt2j/1/
Super simple, I just need to center the text vertically so it lines up with the button
Nothing I try seems to work
<div class="container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text"><p>Some Info</p></div>
<div class="col-sm-4 text-center text"><p>Some more Info Her</p></div>
<div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a></div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text"><p>Some Info</p></div>
<div class="col-sm-4 text-center text"><p>Some more Info Her</p></div>
<div class="col-sm-3 text-center"><a class="btn">Read More</a></div>
<div class="col-sm-1"></div>
</div>
</div>
One possible solution is to use line: height:
html
<div class="container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text">
<p>Some Info</p>
</div>
<div class="col-sm-4 text-center text">
<p>Some more Info Her</p>
</div>
<div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text">
<p>Some Info</p>
</div>
<div class="col-sm-4 text-center text">
<p>Some more Info Her</p>
</div>
<div class="col-sm-3 text-center"><a class="btn">Read More</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
css
.row {
background: gray;
color: white;
padding: 5px 0;
margin: 0 0 10px 0;
}
.text p {
display: inline-block;
//padding: 9px 0 0 0;
vertical-align: middle;
}
.btn-btn {
}
.btn {
background: red;
color: white;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: middle;
}
.col-sm-3, .col-sm-4 {
line-height: 35px; /*add line height*/
}
p {
margin: 0;/*remove margin from p*/
}
fiddle

Resources