I have a Bootstrap-card but there is a problem with its width. I'd like to that card will take a full with of the column which I set. Here is a piece of code that I use and screenshot which presents actual width and wanted (with blue background).
Do you know any nice solution to make my goal fixed? Please take into consideration the responsive view.
<div class="row">
<ng-container *ngFor="let event of events">
<div class="col-12 col-lg-6 d-flex mt-5">
<!-- Card -->
<div class="card shadow-light-lg lift lift-lg">
<a class="card-body my-auto">
<div class="d-flex justify-content-between align-content-center align-items-center py-3">
<!-- some content -->
<h3 class="mt-auto">
{{event.title}}
</h3>
<div class="mb-0 text-muted" id="card-description">
{{event.description}}
</div>
</div>
</a>
</div>
</div>
...
</ng-container>
</div>
The width is not being applied properly. Either give width of 100%. Secondly you are using display-flex. So like parent has flex then items be given respective width.
Kindly share your code on stackblitz so we can better assist you. It will be much easier to debug.
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.
building a web page using Bulma I want to display several events in this way:
<div class="card" style="background: lightgreen;">
<div class="card-header p-4">
<div class="is-flex is-flex-direction-row ">
<div class="has-text-right pr-4 is-one-quarter" style="white-space: nowrap;">
<strong>[1st column]</strong><br/>
See https://codepen.io/baschtl/pen/PobXamm
But I want to have the first column for each "row/line" always have the equal width.
But maybe this would be only possible by using the good, old TABLE element [https://bulma.io/documentation/elements/table/] and not columns or something else, too?
Thanks a lot!
mtemp
You can fix the width of the first column with is-x class which can be is-1 to is-12.
<div class="columns">
<div class="column is-1"></div>
<div class="column"></div>
</div>
I'm not familiar with this framework but this is pretty simple to do in CSS.
You could add a class with width to each first element like this
.width-fix{
width:10rem;
}
Your html (minus white-space:nowrap and added width-fix class):
<div class="card" style="background: lightgreen;">
<div class="card-header p-4">
<div class="is-flex is-flex-direction-row ">
<div class="width-fix has-text-right pr-4 is-one-quarter">
<strong>[1st column]</strong><br/>
Saturday<br /><strong>27th May 2022</strong>
</div>
<div class="pr-4" style="min-width: 80px;">
<strong>[2nd column]</strong><br/>
<a href="#" target="_blank">
<figure class="image is-128x128">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</a>
</div>
Also keep in mind that using table isn't bad if you actually need a table, so you could also consider that.
I'm faced two issues
col-6 center text what should we do in order change to center,need change to row?
when the size is small, how to set image and text always at bottom
<div class="container-fluid ">
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
<div class="col-md-6 ser-first-grid text-center">
<h3>PRODUCT SOURCING</h3>
<p>We assist clients in sourcing suppliers to meet specific product requirements.</p>
</div>
</div>
<div class="container-fluid">
<div class="col-md-6 ser-first-grid text-center">
<h3>DESIGN DEVELOPMENT</h3>
<p>MALCORP possesses the capacity to design specific and specialized products to meet the most discerning of customer requirements.</p>
</div>
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
</div>
Check this jsfiddle out link
Use bootstrap flex-order here for responsive ordering of columns.More info Bootstrap flex-order
Add this class order-md-1 on second column and order-md-2 on first column.
As for the centering part, a text-center class on column should've worked.
Also you must put your columns inside rows.
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 am building a collection-repeat that iterates through my objects and fills up cards based on them. I have two main questions to complete my job. I have been using 'Thumbnail' cards when using this approach but I am not able to correctly set margins. It basically adds some margin on the left and none on the right nor between different cards (bottom margin). I have tried CSS, but nothing works.
This is my HTML code:
<div class="card" collection-repeat="item in items" item-width="'100%'">
<div class="item item-divider">
{{item.eventTitle}}
</div>
<div class="item item-text-wrap">
<b>{{item.eventHour}}</b><br />{{item.eventText}}
</div>
</div>
And this is what I get on the browser (no custom CSS added here), look at the left margin and the unexisting one on the right:
How can I solve both problems with bottom and right margins?
Thanks in advance
is there a specific reason you are using collection-repeat? it will limit your styling options.
converting to a simple ng-repeat makes your issues go away http://codepen.io/aaronksaunders/pen/PzZVPr
<ion-content>
<div class="list">
<div class="card" ng-repeat="item in items">
<div class="item item-divider">
{{item}} HEADER
</div>
<div class="item item-text-wrap">
{{item}} BODY..
</div>
</div>
</div>
</ion-content>