I am attempting to make the layout of a container with a row and an accordion beneath it have equal width columns using the bootstrap grid. The problem is with aligning the data within the accordion to the top most row.
My understanding with bootstrap 4 is that the col class should auto-size per column so I would think all 8 columns would be the same width regardless of content.
The top looks okay but the rows below are condensed. Here is an example:
Here is my razor page below:
<body>
<div class="container">
<div class="row">
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].ItemDescription)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].UoM)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
</div>
<div class="col">
#Html.DisplayNameFor(model => model.ReportHighLevel[0].Week)
</div>
</div>
</div>
<div class="container">
<div id="accordion">
#{int counter = 0; }
#foreach (var dataVM in Model.CollapseReport)
{
<div class="card">
<div class="card-header" id="heading#(counter)">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse#(counter)" aria-expanded="true" aria-controls="collapse#(counter)">
<div class="row">
<div class="col">
#dataVM.Summary.Item
</div>
<div class="col">
#dataVM.Summary.ItemDescription
</div>
<div class="col">
#dataVM.Summary.CorpCustomer
</div>
<div class="col">
#dataVM.Summary.UoM
</div>
<div class="col">
#dataVM.Summary.SummedOrder
</div>
<div class="col">
#dataVM.Summary.SummedForecast
</div>
<div class="col">
#dataVM.Summary.Difference
</div>
<div class="col">
#dataVM.Summary.Week
</div>
</div>
</button>
</h5>
</div>
<div id="collapse#(counter)" class="collapse" aria-labelledby="heading#(counter)" data-parent="#accordion">
<div class="card-body">
<form method="post">
<input type="hidden" name="var1" value="#dataVM.Summary.CorpCustomer" />
<input type="hidden" name="var2" value="#dataVM.Summary.Item" />
<input type="submit" class="btn btn-default" value="Add to Log" asp-page-handler="AddLog" asp-route-data="#dataVM.Summary.CorpCustomer, #dataVM.Summary.Item)" />
</form>
<div class="container">
#foreach (var item in dataVM.WeeksOfData)
{
<div class="row">
<div class="col">
#item.Item
</div>
<div class="col">
#item.ItemDescription
</div>
<div class="col">
#item.CorpCustomer
</div>
<div class="col">
#item.UoM
</div>
<div class="col">
#item.SummedOrder
</div>
<div class="col">
#item.SummedForecast
</div>
<div class="col">
#item.Difference
</div>
<div class="col">
#item.Week
</div>
</div>
}
</div>
</div>
</div>
</div>
counter++;
}
</div>
</div>
The reason is your btn btn-link button nested in <h5>. .btn class from Bootstrap is with style display: inline-block;, which doesn't take up the 100% width.
Even you set width: 100%; on the button, your columns still won't be aligned because:
.btn has style of white-space: nowrap; hence the texts inside your collapsable heading won't wrap, while the texts inside the collapsable body will.
.btn class has .75rem padding left and right, which will take up the overall row width.
You have a nested container inside your collapsable body. The container has 15px padding left and right, which will take up the overall row width as well.
Hints: you might want to think of a different design / layout.
For example, get rid of the button nested in the heading and use anchor isntead:
<div class="container">
#for (int i = 0; i < 5; i++)
{
<div class="card">
<div class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse#(i)">
<div class="row">
<div class="col">Item</div>
<div class="col">Item Description</div>
<div class="col">Corp Customer</div>
<div class="col">UoM</div>
<div class="col">Summed Order</div>
<div class="col">Summed Forecase</div>
<div class="col">Difference</div>
<div class="col">Week</div>
</div>
</a>
</div>
<div id="collapse#(i)" class="collapse">
<div class="card-body">
<div class="row">
<div class="col">Item</div>
<div class="col">Item Description</div>
<div class="col">Corp Customer</div>
<div class="col">UoM</div>
<div class="col">Summed Order</div>
<div class="col">Summed Forecase</div>
<div class="col">Difference</div>
<div class="col">Week</div>
</div>
<div class="row">
<div class="col">Item</div>
<div class="col">Item Description</div>
<div class="col">Corp Customer</div>
<div class="col">UoM</div>
<div class="col">Summed Order</div>
<div class="col">Summed Forecase</div>
<div class="col">Difference</div>
<div class="col">Week</div>
</div>
<div class="row">
<div class="col">Item</div>
<div class="col">Item Description</div>
<div class="col">Corp Customer</div>
<div class="col">UoM</div>
<div class="col">Summed Order</div>
<div class="col">Summed Forecase</div>
<div class="col">Difference</div>
<div class="col">Week</div>
</div>
</div>
</div>
</div>
}
</div>
Screenshot:
Related
Bootstrap has its own grid system and I want to utilize it as much as I can so that I can minimize any custom CSS.
I have the code below wherein I have a couple of row classes here, you can see here that the first row is not aligning with the rest of the row. Is there any way that I can make this aligned?
You can also view it here on codepen https://codepen.io/aceraven777/pen/zYZMpEd
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>
The issue is that you are combining rows and columns together in one div. With bootstrap you cant combine rows and columns as there are some conflicting css. Just split this div <div class="col-8 row"> into two seperate divs.
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>
I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!
Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
I'm trying to prevent my group of three icons from collapsing to a vertical state, currently they are align horizontally, the problem is when i adjust the screen to a smaller one, the icons will readjust as well when my screen reaches a certain size
<div class="">
<div class="list-item">
<section class="row">
<vehicleHeading [vehicleItem]="vehicleItem" class="col-md-10 col-sm-9 col-xs-8 nopadding"></vehicleHeading>
<div class="icon-group col-md-2 col-sm-3 col-xs-4">
<span class="pull-right">
<i [id]="mapId" (click)="showVehicleOnMap()" class="material-pin pointer nopaddingLeft"></i>
<span [id]="collapseId" (click)="showVehicleDetails()"><i class="material-list pointer"></i></span>
<collapsibleImage [id]="detailsId" (collapseEvent)="onToggleClick($event)"></collapsibleImage>
</span>
</div>
</section>
</div>
<div [collapse]="isCollapsed" class="panel-body topBorder">
<div class="row">
<div class="col-sm-6 col-md-7 col-lg-7">
<div class="form form-horizontal hidden">
<div class="form-group">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-sm-5 col-md-5 col-lg-5"></div>
<div class="col-sm-5 col-md-5 col-lg-5">
<div class="pull-right">
<i class="viewMore">Details</i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-5 nopadding">
<div class="pull-right thumbnail">
<vehicleMap id="vehicleMapId" #mapDetails [VehicleDetails]="vehicleItem"></vehicleMap>
</div>
</div>
</div>
</div>
</div>
I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps
i am creating the layout something like this :
[my layout on paper][1]
but from html and using bootstrap i got following like this :
http://jsfiddle.net/52VtD/7352/
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
<%--<div>
<span class="verticaltextname1">Project</span>
</div>
<div>
<span class="verticaltextname1">Work History</span>
</div>--%>
</div>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-xs-3">
<div class="topBox">About me</div>
</div>
<div class="col-xs-3">
<div class="topBox">Specialization</div>
</div>
<div class="col-xs-3">
<div class="topBox">Awards</div>
</div>
<div class=" col-xs-3">
<div class="topBox">Testimonials</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="topBox">Project</div>
</div>
<div class="col-xs-3">
<div class="topBox">Description</div>
</div>
<div class="col-xs-3">
<div class="topBox">Achievements</div>
</div>
<div class="col-xs-3">
<div class="topBox">Clients</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
WorkedAs
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Skills
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
Responsibilities
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Work involved
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/7352/
how can i adjust the greenyellow column as per my paper starch, and create the same space between each box?