When doing some research, I found that I have the exact same problem as here: Bootstrap columns not aligning correctly.
Except I cant use the same solution because the columns are being added with a ng-repeat loop and I cant predict their height or how many there will be.
And they are not stacking properly when one is a bit taller than the others, what would you recommend doing about this?
Relevant code (The controller just populates the products array):
<div class="col-sm-2 text-center" ng-repeat="product in products">
<img class="img-responsive img-center" src="{{product.image}}" alt="">
<h4>
{{product.name}}
</h3>
<p>Price: {{product.price}}€</p>
</div>
Thank you!
You could use a jQuery plugin like Masonry or Isotope which will make the images fit together regardless of height.. or you can try CSS 3 column-width like this example: http://www.codeply.com/go/Ndk9jqofgR
Related
I'm stumbling uppon this problem every now and then since I started doing more frontend work. I'm using bootstrap as my frontend framework and want to do a simple 2 column layout. Each column has a title and an image.
Now my problem is that, if a title of one column spreads over multiple lines, the starting height of the image is not aligned along both columns.
Example:
the markup is just the basic bootstrap layout:
<div class='row'>
<div class='col-6'>
<h4>title</h4>
<img src='...'>
</div
<div class='col-6'>
<h4>some other long title over two lines</h4>
<img src='...'>
</div
</div>
I know how I could set the title heights with js to be the same for all titles but that does not seem to be a very nice solution to the problem. Is there a simple css trick to achieve this?
I am currently working on a landing page that uses bootstrap's grid system for positioning and the desktop view has the layout looking something like:
|h1|--------------------|p|
|Button|
The mobile view has it looking like:
|h1|
|p|
|button|
Because of the grid, the h1 and button are in 1 div and the P is in it's own div.
The easy solution would be to just have hidden divs based on the breakpoints, but I'm trying to avoid this. I've tried using the order class to move things around with other elements on the page, but seeing as the parent s are the 2 objects in the grid and not their children, this doesn't work. I could also do this with JS, but I would also like to avoid doing this.
<section class="test">
<div class="container">
<div class="test--content row justify-content-lg-center text-lg-left">
<div class="test--cta col-12 col-lg-5">
<h1>Headline</h1>
<div class="button main">CTA</div>
</div>
<div class="contact--text col-12 col-lg-5">
<p>Content</p>
</div>
</div>
</div>
</section>
As I mentioned, the solution with CSS and JS are pretty clear, but as I've barely used Bootstrap, I am curious to know if this is possible without using the above mentioned solutions or if there was a way to do this with Bootstrap.
I have a list of users, and some information about each user. I want to present this information to columns, one column for each user, using ngFor.
Apparently, the content and information of each user is of different length, so it turns out that the height of each col is different.
Of course, I have searched how to make bootstrap cols equal, using the row.eq.height css from bootstrap (Make cols with eq height), and also searching for other solutions but it doesnt seem to work.
I am using boostrap 4.
Below is my code.
I think the problem lies with the ngFor.
<div class="row">
<div class="col-lg-3" *ngFor="user of users">
<div class="panel panel-default">
<div class="panel-body">
<label>Username</label>{{user.username}}
<label>Info</label>{{user.info}}
<!--more stuff here like user.name etc etc -->
</div>
</div>
</div>
<div>
EDIT:
Added plunker: Plunker
This is the default behaviour of HTML elements, the height of the container is setted by the content.
Pay attention to the fact that row-eq-height affects the col-* if you work with bootstrap in flexbox mode.
You are not using that mode, you can see that there is floats for positioning.
You can enable that flexbox mode, by using bootstrap v4 and then it will work, or add the style manually.
*Pay attention: your plunker has an invalid attribute, it suppose to be styleUrls and styleUrl.
https://plnkr.co/edit/1GQHpHDhgaTGKxDvxmdm?p=preview
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
I am trying to put a detail view between rows in my web application.
I am using Bootstrap and some Frontend Rendering.
My code looks somewhat like this:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
etc...
I am basically looking for some way to do this in bootstrap or some library that does it. The closest example I could find is in the newest itunes version, I've attached a screenshot for that.
Edit:
What I have tried / thought of:
Put the detail view as an absolutely positioned div inside the tile and give the tile a margin-bottom.
This didn't work out since the layout simply breaks. To make this work, you would have to give all elements in the row a margin-bottom.
Put a set of tiles into a row-div and just insert the detail div after that specific row.
This will either break every responsive feature or require a lot of javascript to somehow dynamically put the divs into rows.
I am basically looking for a library / css hack that makes me able to do this without writing a whole lot of javascript.
For the 'details' row, you'd probable just need to use:
<div class="col-xs-12">
...
</div>
That would force it to span the full width regardless of the screen size. So your 3 rows would look like:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>