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>
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 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/
I want to align and image and an div inline. I also want the top's of the image and div to be aligned aswell. This is what I have so far
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
I tried the class d-inline-block and it gets close to what I'm looking for but i need the text to be at the top.
You can see here:http://www.bootply.com/zpj12TL4wI
Bootstrap 4 includes a utility class for that: align-top. No extra CSS is needed...
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
<div class="comment d-inline-block align-top">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
</div>
http://www.bootply.com/wtAOA1JPn1
Just a vertical-align change is what ya need:
.comment {
vertical-align: top;
}
I have a div that looks like this:
<div class="main-div col-xs-12 col-md-6">
<div class="col-xs-6">
<a href="">
<img class="img-responsive" src="https://placehold.it/285x251">
</a>
</div>
<div class="content col-xs-6">
<h4>Header</h4>
<p>Paragraph test</p>
<div class="buttons">
<div class="btn btn-primary col-md-6">Add to cart</div>
<div class="btn btn-success col-md-6">View Item</div>
</div>
</div>
</div>
and I want that img-responsive class will determine the total height of the main div
So if it's will look like this:
http://jsfiddle.net/y9Let9dh/
so I want that max-height of a main-div class, will be as img-responsive height
and <p> of div class="content " will be overflow: hidden style
My problem that I have no idea how I get the height of img-responsive at any given time
My goal is also, to do
The buttons always in the bottom, parallel to the img
See JSFiddle. Are you looking way like this?
You need to set overflow: hidden to your main-div, wrap your content into some div (I called it cont-inner) and set position: absolute to him, because absolute positioned elements has not change parents height.
<div class="row">
<div class="col-md-6 left" ng-if="">
<a ng-click="" class="btn btn-primary">Edit</a>
</div>
<div class="col-md-6 right" ng-if="">
Reports
</div>
I need to fixed the right div even though the left one is not there due to if condition.Currently it moves to left side when left div hides.I need to avoid that.How can I do that ? Thanks in advance.
You could achive this by adding pull-right class to the right div.
Bootply - DEMO
<div class="container">
<div class="row">
<div class="col-md-6 pull-right" ng-if="">
Reports
</div>
</div>
</div>
The pull-left and pull-right classes are used for float an element to the left or right side:
Float an element to the left or right with a class.!important is
included to avoid specificity issues. Classes can also be used as
mixins. - by Bootstrap