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?
Related
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 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>
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
I didn't really know how to put it in words so here is what i actually need to create but have no idea how.
I'm using the latest version of bootstrap
This is the desired effect
https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0
and this is what I currently have
https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0
this is the markup
<div class="container">
<img class="img-responsive" src="logo.png">
<h1>The text</h1>
</div>
so what would you recommned the site has to be responsive and in terms of mobile version i think the best case sceneario would either be smaller font or stack it on top of each other.
Please help me I'm quite desperate.
It isn't completely clear what you are asking for, but I'll give it a try.
The first issue that I see is the that you aren't following proper bootstrap layout rules (see http://getbootstrap.com/css/#grid). Below is an example of how to do it. To keep items lined up horizontally, you need to have <div class='row'>. Below is what I think you are looking for.
<div class="container">
<div class='row'>
<div class='col-xs-3'>
<img class="img-responsive" src="http://www.xamalot.com/preview/png3/5e78c8d8-3f02-4e3c-9a3a-d95432c606e3" />
</div>
<div class='col-xs-9'>
<h1>The text</h1>
</div>
</div>
</div>
I have put together a working sample at http://jsbin.com/mafuxeyebu/1/edit?html,output
I'm not entirely sure what you're asking but you could try using a screenshot program to capture the desired header as an image then you would not have to build it.
To make an image responsive in bootstrap you can just use the responsive class:
<img class="responsive">
I just used awesome-screenshot to grab that as an image
right click> open image in new tab if you just want to use this image
Now You could use GIMP or Photoshop to edit in your logo/ slogan.
Obviously this is a work around, but then again im not even sure this is what you wanted.
Thanks
What is proper way to make bootstrap grid?
Here is example what I have
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
Do i need always to make row before col, or i dont need to use col if I am creating new row
Or is it proper to make it like this
1.
<section class="content row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
<div class="col-md-12">
<div class="what">
HELLO 2
</div>
</div>
</section>
Or it is proper way to make it like this
2.
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
Or does i need to use COL after row like this?
3.
<div class="row">
<div class="page-header">
HELLO
</div>
</div>
<div class="row">
<div class="page-header">
HELLO
</div>
</div>
Why i must use ROW and when?
And why i must use COL and when?
This is just example, if someone can asnwer me what is proper way, then it will be nice?
The grid works with 3 parts: a container, a row and column(s)...
The container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.
The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.
So, to answer your question, assuming that you have a .container or .container-fluid wrapper around your examples, both 1 and 2 are properly formatted. That said, I would use example 1, because it requires less markup (generally a good thing) and since you are grouping your elements into a section, it seems they are semantically connected, thus the extra row seems superfluous.
As, #skelly suggests, I recommend taking a look at the Grid section in the doc. Below are some of key points about the use of rows found there:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Start with the examples in the Bootstrap docs: http://getbootstrap.com/css/#grid-example-basic
From the docs..
Content should be placed within col-*, and only col may be immediate children of row.
Rows must be placed within a .container for proper alignment and padding.
It's fine to have columns totaling more than 12 in a single row. As the docs say..
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."
Therefore, I would go with something closest to your #1 but make sure it's in a container..
http://www.bootply.com/Cy2i2H0oZB