I want to have a image at left and at right some information. This information div at right have a orange border around. And I want that this information area occupies the same height of the image. So i created a div .details with display flex and align-items stretch. But its not working, the image and the information area dont occupy the same width. Do you know why?
example: https://jsfiddle.net/wjvwovy2/
html:
<div class="container py-4">
<div class="row">
<div class="details">
<div class="col-8 px-0" style="background-color: red">
<img style="width: 100%" src="http://via.placeholder.com/700x350"/>
</div>
<div class="col-4 px-0">
<div class="details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Date</span>
<h1 class="h5 font-weight-bold">Title</h1>
<span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
Subtitle2
</div>
</div>
</div>
</div>
</div>
This is because you have applied the visual styles in a descendant which is not a direct child of the .details element. There are several ways to fix this, depending on what you are trying to achieve.
A quick one is to apply d-flex class in <div class="col-4 px-0"> and flex-grow: 1 in <div class="details-title d-flex flex-column align-items-start">.
https://jsfiddle.net/todorito/32ukpemr/1/
In your fiddle it's just the closing bracket of details-title in the CSS which is missing:
https://jsfiddle.net/468p5rj7/2/
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
I add div using flex display parent of flex display.
HTML:
<div class="d-flex align-items-start flex-column" style="height: 100px;">
start
</div>
<div class="d-flex align-items-end flex-column" style="height: 100px;">
<div class="d-flex justify-content-between align-content-center">
<div>
left
</div>
<div>
right
</div>
</div>
</div>
in action I need to show two div in left and right so add justify-content-between class but this this class doesnt work and not show in left and right. how do fix this problem ?!
demo here
You need to remove "align-items-end" from the parent div of "left and right" then it will work.
EDITED:
The explanation for that is if you are using d-flex on a parent div along with "align-items-end" then what will happen is that the parent div will align all the items to the parent div's flex's end so in this case the items inside of the parent div were aligned to the parent div's flex's "end" and "justify-content-between" wasn't working coz the items were stuck at the parent div "flex's" end. Hope this helps. Thanks.
<div class="d-flex align-items-start flex-column" style="height: 100px;">
start
</div>
<div class="d-flex justify-content-between align-content-center" style="height: 100px;">
<div>
left
</div>
<div>
right
</div>
</div>
How do I get my svg to float:right; and float:left; in the following codepen? I am using the float-right and float-left Bootstrap 4 utility classes. But it doesn't work on my <div> elements. I'm using D3.js to create two bar charts and place them side by side.
Thank you.
<div class="container">
<div class="row">
<div class="col-6" id="barchart"></div>
<div class="col-6 float-right" id="barchart2"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
</div>
Instead of using float I used something similar to what Paulie_D suggested.
d-flex justify-content-end
You have added the float-right class to the parent element which is already applied the entire col-6.
You need to create a child div and apply the float-right and add your ids for the bar chart.
<div class="container">
<div class="row">
<div class="col-6">
<div class="float-left" id="barchart"></div>
</div>
<div class="col-6">
<div class="float-right" id="barchart2"></div>
</div>
</div>
</div>
I'm using .h-75 from Bootstrap to resize an image relative to its parent div. On Firefox resizing works, but on Chrome it seems to ignore it.
I tried adding object-fit:cover but it didn't work.
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh;">
<img src="./img/mmm.png" class="d-none d-sm-inline h-75">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
I'd like chrome to dynamically resize the image when I reduce the viewport the same way firefox does it.
Solution: ->
Insted of using h-75 class, you can try img-fluid class to <img> tag...it adjust automatically according to viewport.
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh;">
<img src="./img/mmm.png" class="d-none d-sm-inline img-fluid">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
You can try this...
Solution: ->
If you adding max-height on parent div 50vh... So you have to add height same as max-height..
Here is the code...
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh; height: 50vh">
<img src="https://yt3.ggpht.com/a/AGF-l7-BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-mo-c-c0xffffffff-rj-k-no" class="d-none d-sm-inline h-75 img-responsive">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
I tried on both browsers Firefox and chrome...
In the end I got the intended behavior by chnaging from mex-heigh vh, to just vh.
I'm trying to align some content in Bootstrap 4. It's not working the way I think and I don't understand why. Specifically, I'm unable to vertically or horizontally align content in a column. For example, in this Bootply, I have the following:
<div class="container">
<div class="row">
<div class="col-8">
<h2 class="display-4">Some Text</h2>
<p class="lead">
Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side.
It's not there because Bootply doesn't allow iframes.
</p>
</div>
<div class="col-4">
<div style="border:solid 2px #ddd;">
A vertically centered YouTube video.
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-3">
<div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>
</div>
<div class="col-9">
<h3 class="card-title">Detail</h3>
<p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How do I vertically align the YouTube video so that it's centered? How do I vertically align the arrow so that it's centered? I can't seem to even get the arrow to center horizontally. I tried using justify-content-center as mentioned here without any luck. What am I doing wrong?
You need to use nested flexbox
.col-3 {
display:flex;
align-items:center;
justify-content:center;
}
Bootply