I've created this layout in Angular 9 using Bootstrap 4's row and column classes. The charts are created by the Chart.js library.
For some reason I can't get the columns in each row to be of the same height, so I've come here for help.
Layout Markup
<div class="container mb-2">
<div class="row" *ngFor="let row of rows">
<div [ngClass]="{'col': component.cols == 4, 'col-9': component.cols == 3, 'col-6': component.cols == 2, 'col-3': component.cols == 1}" *ngFor="let component of row">
<app-chart></app-chart>
</div>
</div>
</div>
Component Markup
<div class="container-fluid my-1 component-shadow rounded-lg">
<div class="row border">
<div class="col pt-1">
<div class="h5 text-center">Some Chart</div>
</div>
</div>
<div class="row border-left border-right border-bottom">
<div class="col py-2">
<canvas
baseChart
width="400"
height="200"
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[chartType]="chartType"
>
</canvas>
</div>
</div>
</div>
The column classes are determined by the conditions in *ngClass
Can you please check with below css, hope it will work for you.
.row { display : flex; flex-wrap :wrap; }
Nevermind. All I had to do is to set the maintainAspectRatio of the chart in ChartOptions to false.
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 am using Tailwind CSS and am trying to build a grid that certain cell contents span multiple cells while other items stay in the single cell. In the code below, I try to show what I am trying to accomplish. I know my col-span-2 class is not doing anything, but I put it there to indicate what I wish I could do. I want all cells to be the same width (I just want some cell content to span over the dividers). Do I need some sort of overlay logic?
Any help is appreciated.
Thanks!
<div id=container class="m-auto p-2">
<div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
<div id=cell1 class="px-4 h-24">
Cell 1<br />
<div id=thingThatSpansTwoCells class="h-4 bg-green-700 text-white col-span-2">Spans 2 Cells</div>
</div>
<div id=cell2 class="px-4 h-24">Cell 2</div>
<div id=cell3 class="px-4 h-24">Cell 3</div>
</div>
</div>
You will need to write your own CSS for this. To span 2 column, use width:200% and don't forget to account for the padding you are using:
.w-200 {
width:calc(200% + 3rem);
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div id=container class="m-auto p-2">
<div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
<div id=cell1 class="px-4 h-24">
Cell 1<br />
<div id=thingThatSpansTwoCells class="bg-green-700 text-white w-200">Spans 2 Cells</div>
</div>
<div id=cell2 class="px-4 h-24">Cell 2</div>
<div id=cell3 class="px-4 h-24">Cell 3</div>
</div>
</div>
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
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 have a container with several rows. And in each row I have several columns.
I would like to increase the space between each column
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col-md-4 card ">
Colonne 1
</div>
<div class="col-md-4 card">
Colonne 2
</div>
<div class="col-md-4 card">
Colonne 3
</div>
</div>
</div>
<div>
instead usind col-x while you want the same width, you may only use col and they will span the row with an equal width and let you add horizontal margins .
example
.card {
border: solid;/* to show where they are*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col card mx-1 ">
Colonne 1
</div>
<div class="col card mx-1">
Colonne 2
</div>
<div class="col card mx-1">
Colonne 3
</div>
</div>
</div>
<div>
ressources :
https://getbootstrap.com/docs/4.0/utilities/spacing/
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
which is the reason of the mx-1 class added
https://getbootstrap.com/docs/4.0/layout/grid/
where you can find col class which is used to auto-size the columns , if all box receive the col class, they should be of equal width.
<div class="container">
<div class="card-deck text-center mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
</div>
</div>
I used this with cards, I think this what you're looking for.
Keep me updated! ;)
Use CSS margin property.
.card {
margin: 0px 10px;
}
Working example
.card {
margin: 0px 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col col-md-4 card ">
Colonne 1
</div>
<div class="col col-md-4 card">
Colonne 2
</div>
<div class="col col-md-4 card">
Colonne 3
</div>
</div>
</div>
<div>
Bootstrap columns have no space between.
Make another div inside by default column 4 has 15px padding which means if you make div inside it will leave space on both left and right side.
<div class="col-sm-4">
<div class="inner">
Your Content Here
</div>
</div>