I have 3 columns all in a row, each with a nested row and 3 more columns.
.row
.col
.row
.col
.col <-- needs to be full height
.col
.row
.col
.col <-- needs to be full height
.col
.row
.col
.col <-- needs to be full height
As you can see, the middle column is not stretching the full height
I tried align-items-stretch and h-100 but no luck.
Any help is much appreciated! Thanks!
Full code here
<div class="container bg-secondary pt-5">
<div class="row">
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/1.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/3.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
</div>
</div>
You can use Bootstrap's FlexBox Utilities for this.
Give the .row under .col.mx-5 these classes: row flex-row h-100.
Give the .col-12, which is supposed to be small, flex-shrink-1 class.
Give the .col-12, which is supposed to be longer, h-100 flex-grow-1 class.
Full Code:
<div class="col mx-5 px-5">
<div class="row flex-row h-100">
<div class="col-12 flex-shrink-1">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light flex-grow-1 h-100">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
I have checked it and it works.
Related
I have a question regarding a bootstrap grid system I am trying to achieve - and have not been successful so far.
I am trying to do the following grid system:
I have tried a code that you'll find with this JSFiddle.
<div class="container mt-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12 border bg-light">
<h3>Bloc 2</h3>
</div>
<div class="col-lg-6 col-md-12 bg-danger">
<h3>Bloc 3</h3>
</div>
</div>
</div>
It works well for xs and md system. However, I have issues with the lg version, where I don't find a way to stack the bloc number 2 (grey) on top of the bloc number 3 (red). Is there a way to change the place of such a column? As indicated on the figure above, the bloc number 1 should fall to the bottom of the page.
Thanks a lot for your help!
Basically, you have to wrap a div for a second column around the gray and red divs
<div class="container ">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
<div class=" border bg-light">
<h3>Bloc 2</h3>
</div>
<div class=" bg-danger">
<h3>Bloc 3</h3>
</div>
</div><!--new div end-->
</div>
</div>
You will need to work out the tweaks for spacing, but this is a start
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
I'm displaying card decks in order to show a set of articles stored in a database. This is the pretty simple piece of code I'm using:
HTML
<div class="row">
<div class="card-deck">
<template is="dom-repeat" items="{{articles}}" as="article">
<div class="col-12 col-md-4 mb-md-5">
<div
class="card"
on-tap="showViewer"
data-id$="[[article.id]]"
>
<img
class="card-img-top img-fluid vertical-image"
src$="{{getArticleImage(article)}}"
onerror$="this.src='{{defaultimage}}'"
alt="{{getArticleDescription(article)}}"
/>
<div class="card-body d-flex flex-column justify-content-center py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article)}}>
<span class="medium-text">
{{getSources(article)}}
</span>
</div>
<p class="card-text primary-headline medium-text">
{{article.schema:headline}}
</p>
</div>
</div>
</div>
</template>
</div>
</div>
CSS
.vertical-image {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.icon-sm {
height: 20px;
width: auto;
}
.medium-text {
font-family: Raleway-Medium;
}
.primary-headline {
font-size: 25px;
line-height: 25px;
text-align: justify;
}
According to Bootstrap documentation, using the card-deck class should make all the cards in the deck to have equal width and height. However, I'm not acheiving that behaviour. Here you are a picture where you can see what I am getting.
What would be the correct way to achieve that all the images in the cards and all the cards have the same height and width?
Check this. Hope it helps.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
Card. I'm just a simple card-block.
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 text-white bg-danger">
<div class="card-body">
<h3 class="card-title">Danger</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 card-body">
Card. I'm just a simple card-block, but I have a little more text!
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 border-primary">
<div class="card-body">
<h3 class="card-title">Primary</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 card-body">
Card. I'm just a simple card-block.
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card text-white bg-primary">
<div class="card-body">
<h3 class="card-title">Hello</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
</div>
</div>
In the following example is there a bootstrap way of making the div with id "second" fit inside its parent container and not overflow when given h-100 class? A hacky way I used was applying overflow:hidden to the parent container of #second div and it does the job for my specific case but would this be called an elegant solution in this scenario?
<div class="container">
<div class="row">
<div class="col-6 bg-dark">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
https://www.codeply.com/go/pSVIlOETpB
Sure, just make the containing col-6 display:flex, flex-direction:column by using d-flex flex-column classes on it...
https://www.codeply.com/go/5YiBkLo0qO
<div class="container">
<div class="row">
<div class="col-6 bg-dark d-flex flex-column">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns..
The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height...
HTML
<div class="container">
<div class="row align-items-center bg-faded">
<div class="col-md-2">
<div class="card card-block h-100">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100">
I have a little bit.
</div>
</div>
</div>
</div>
Demo of problem
Here is a simpler solution for you:
using only justify-content-center utility class because .card has already flex-direction: column property
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<code>normal .row with .card inside .col-*</code>
<h6>Problem is that card content is not centered</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a little bit.
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<code>.align-items-center.row with .card inside .col-</code>
<h6>Problem is that cards are no longer full height</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
One way I've found to solve the centering issue is using the flex-column utility class. Since each card is display: flex, flex-column can be used to set flex-direction: column. Then, justify-content-center vertically aligns the content...
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="card card-block h-100 flex-column justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 flex-column justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 flex-column justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
Demo