I'm using Bootstrap 4, and have a div with the card class on it, which has a fixed height. This is what I'm trying to get:
The code I'm using is
<div class="card">
<div class="card-block d-flex flex-column">
<h2 class="card-title h4 align-self-start">Top Left</h2>
<div class="align-self-center">
Middle Middle
</div>
<aside class="align-self-end">Bottom Right</aside>
</div>
</div>
but the lines are all squashed together, presumably because the card-block is not expanding to the full height of the card.
Is there a way to get the card-block to fill the card, or otherwise get this to display correctly?
You can use justify-content-between on the card-block..
<div class="card">
<div class="card-block d-flex flex-column">
<h2 class="card-title h6 align-self-start flex-grow d-flex">Top Left<br>Top Left</h2>
<div class="align-self-center flex-grow d-flex">
Middle Middle
</div>
<aside class="align-self-end flex-grow d-flex align-items-end">Bottom Right</aside>
</div>
</div>
.flex-grow {
flex: 1 0 0;
}
Demo: https://www.codeply.com/go/5dIgA0ul2q
Update 2018 Bootstrap 4 (stable)
card-block is now card-body
Related
The text doesn't change line properly, I thought it should run in the column and auto change to next line, so they are stay in the column. That's what I saw in the video but is not working.
Thanks for helping.
Here are pictures.
https://ppt.cc/fr1JQx , https://ppt.cc/fPDr2x
Here is my code.
<style type="text/css">
.item:first-letter{
font-size: 50px;
float: left;
}
.item{
background-color: rgb(62, 116, 163);
}
</style>
</head>
<body>
<div class="container">
<div class="row g-5">
<div class="col-3 mb-4" >
<div class="item h-100 width-10">
A abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcd</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
B abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd</div>
</div>
</div>
</div>
Two options to fix:
I found this answer which explains in a bit more detail, but if this is really your content (I doubt it) you need to add this to your CSS:
word-wrap:break-word;
Otherwise I've slightly tweaked your layout and added some real content:
<div class="container">
<div class="row">
<div class="col-3 mb-4">
<p class="h-100 item">
A This is some normal text. I don't know the difference?
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
B You need to use a normal paragraph structure, testing testing testing testing
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
</div>
</div>
You can see that the columns with garbage content are still broken, but the ones I changed work fine.
I am looking for a way to make a row with 8 col-md-6 divs display in a different way than usual.
How bootstrap normally does it:
How I want it:
The number columns is dynamic so it can exceed 20 for example and be a uneven number.
Code:
<div class="row">
{foreach from=$item.Opties|default:array() name=optie item=optie key=key}
<div class="col-md-6">
test {$optie#iteration} (normally there is more code in here)
</div>
{/foreach}
</div>
I have tried:
order-md-* but for this solution i need to add css since it might exceed 12 which i'd rather not.
Having just 2x .col-md-6 and the foreach in there but its a bad solution. since then I have big piece of html twice.
If you can't change the markup structure there's no simple way.
One option is to use flex-column but there is no way to set the number of divs per column so you'd have to use max-height...
#media(min-width:768px) {
.mh {
flex-direction: column;
max-height:140px;
}
}
Another option is to use CSS columns which order from top to bottom instead of left to right.
.row.columns {
column-count: 2;
column-gap: .1rem;
display:block;
}
.columns > .col-md-6 {
display: inline-block;
width: 100%;
max-width: 100%;
}
The last option is to use flexbox ordering for the specific positions...
<div class="row">
<div class="col-md-6 order-1">
<div class="border p-1">1</div>
</div>
<div class="col-md-6 order-3">
<div class="border p-1">2</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">3</div>
</div>
<div class="col-md-6 order-7">
<div class="border p-1">4</div>
</div>
<div class="col-md-6 order-2">
<div class="border p-1">5</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">6</div>
</div>
<div class="col-md-6 order-4">
<div class="border p-1">7</div>
</div>
<div class="col-md-6 order-8">
<div class="border p-1">8</div>
</div>
</div>
Demo: https://www.codeply.com/go/IczuqP9l7K
I have a flexbox column with three bootstrap 4 cards. when I resize the container the first one get taller or shorter because of its responsive design. What I want is to keep the whole container height constant and shrink and grow the middle card. Here is my code:
HTML
<div >
<div class="cards">
<div class="card">
<div class="row">
<div class="col-md-6">
1234
</div>
<div class="col-md-6">
5678
</div>
</div>
</div><!-- /card-one -->
<div class="card">
<p>content for card two</p>
</div><!-- /card-two -->
<div class="card">
<p>content for card three</p>
</div><!-- /card-three -->
</div>
CSS:
.cards {
display: flex;
flex-flow: column;
justify-content: space-between;
}
Fiddle:
Sample
Thanks
My code is given below
<div class="row align-items-center">
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
</div>
CSS look like below
.row {
height: calc(70vh - 60px);
}
When I check-in mobile or small device grid item put some space in upper side and lower side. screenshot attached below
you can see space. I want to make div without space.
How can I?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 200px;background-color: sandybrown;" class="d-flex align-items-center justify-content-center">
<div class="row no-gutters d-flex bg-primary">
<div class="col-12 col-md-6 bg-info">on small 12-cols and medium or above 6-cols</div>
<div class="col-12 col-md-6 bg-warning">on small 12-cols and medium or above 6-cols</div>
</div>
</div>
if you want no padding, no margin only on small screen, you can use media query in scss
#media (max-width: 576px) {
margin: 0px; padding: 0px
}
I am trying to show flot plot in a bootstrap panel, utilizing the full height available, starting with the panel closed. When I open the panel the graph keeps growing in height.
<div class="container">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title ">
<a data-toggle="collapse" data-target="#panel1" >
<h3>Flot Example - fill height when opened</h3>
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="panel1">
<div class="panel-body">
<div id="placeholder"></div>
</div>
</div>
</div>
</div>
This jsfiddle demonstrates the issue: http://jsfiddle.net/65w5xor5/13/