I have a jsfiddle here - http://jsfiddle.net/bva700wx/5/
It's a really simple bootstrap layout.
It's 2 row's that contain cols with an image and one with text.
The text and the image can vary in height.
I need the height of both columns to be the same.
If the text is taller I need the image col to the same height
If the image col is taller I need the text col to be the same height.
I then need the vertically center the image and the text.
I thought this would be easy with display: table; and display: tabel-cell;
Any see what I doing wrong
<div class="container">
<div class="row">
<div class="col-sm-3 box text-center">
<img src="http://placehold.it/100x50" />
</div>
<div class="col-md-9 box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 box text-center">
<img src="http://placehold.it/100x150" />
</div>
<div class="col-md-9 box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
Floating interferes with vertical alignment. I modified your fiddle to give you a working example.
Related
I have an image and a text side by side (image to left, text to the right).
Any idea on how to get the image height to resize according to text paragraphe height (and width staying proportional to height) instead of wrapping text around the image.
This is as far as I was able to go :
<div style="display: table; width: 100%;">
<div style="display: table-cell;">
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
</div>
<div style="display: table-cell; vertical-align: top;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Maybe a flex solution like this :
Go full width and resize the screen, it's working but there is some bugs when the image start growing faster (so we may limit this with media query or max-height)
.container {
display: flex;
width: 100%;
}
.container>div:nth-child(1) {
flex:0;
width: fit-content;
}
.container>div:nth-child(2) {
flex: 1;
}
img {
width: auto;
height: 100%;
max-height:500px; /* Limit the height to avoid bugs when the image get bigger */
}
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u
</p>
</div>
</div>
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Here's what you're asking for:
Image changes height according to paragraph height. Which means...
Image changes width, which means...
Paragraph re-flows in remaining space, most likely resulting in new height, which means...
You're back to step 1.
Given the above, there are two possible scenarios:
You're lucky and at some point 3. won't result in paragraph changing height, hence not triggering 1. => your script stops.
You're not so lucky and 3. always triggers 1. alternating between 2 image heights / paragraph reflows. The page dances/flickers before you and it's blocked rendering until it crashes the browser.
Additionally, in some cases the image will get enlarged way above its natural size, which should be avoided.
With the reserve it's really not a good idea to use this in a production environment, here is what you asked for. To my surprise, at least for the image + paragraph you use in your example, it doesn't crash the browser. But I'm pretty sure there are sizes at which it would. Feel free to test it out:
function bestFit(el) {
let image = $('img', el),
paragraph = $('p', el);
if (image.width() < paragraph.width() / 1.5) {
image.css({
height: paragraph.height() + 'px',
width: 'auto'
});
if (image.height() !== paragraph.height()) {
bestFit(this);
}
} else {
image.css({
width: image.closest('.best-fit').width() * .4 + 'px',
height: 'auto'
});
}
}
function resizeImages() {
$('.best-fit').each(function(){bestFit(this)});
}
$(window).on('load resize', resizeImages);
.best-fit {
display: flex;
position: relative;
}
.best-fit img {
padding: 1em 0;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="best-fit">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Edit: I've added a small tweak to not allow image to get above 40% of total width.
I have started digging into Bootstrap and I'm a bit confused about the usage of the .container class.
Most of the tutorials recommend using the following structure:
-.container
--.row
---.col-
---.col-
Etc
I have stumbled upon this W3schools example:
W3Schools - Bootstrap,
which uses multiple .container elements and doesn't wrap everything inside a .container (e.g. the carousel).
So my questions:
In which cases is it advisable to use multiple .container elements?
Is there a general rule for which types of elements shouldn't be wrapped inside a .container?
Statutory Warning: Don't follow W3Schools. This is one of the typical examples where they are not following the Bootstrap standards plus, the examples are not so good. (See W3Fools). It's always advisable to follow the primary documentation of Bootstrap.
Multiple containers are perfectly okay to separate contents, one best way I could say is, if you have any instance of the background extending to the whole width, then you will definitely use multiple containers.
See the below example:
* {font-family: 'Segoe UI';}
section.about {background-color: #fcc;}
section.contact {background-color: #cfc;}
section.info {background-color: #ccf;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 1</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 2</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 3</div>
</div>
</div>
</section>
<p>With more content</p>
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
Preview
The container element is required by bootstrap to host its grid system. Therefore, you should always have one HTML tag with the .container class. You can also use multiple containers below each other. Nested containers don't work, because they are not nestable due to their padding.
If you want to have full width elements, use the .container-fluid class. This way you can implement carousel items and full width banners.
The container element acts as the root element of your bootstrap application, that hosts all your other elements. Therefore, every bootstrap element should be inside a container.
i'm thinking this will be simple, but i cant get my head round it!
The main "Lorem Ipsum" text paragraph in the screenshot i would like to only fill the left half of the box that its in. When i try and put a div within the main div to do this, it aligns left but the box doesn't expand downwards with the text so it "over spills".
Screenshot
http://i772.photobucket.com/albums/yy4/philbuckthorpe/Screen%20Shot%202016-09-26%20at%2020.51.00_zpshcjcm6qh.png
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<p class="lead">Our Artists</p>
<div class="list-group">
Artist 1
Artist 2
Artist 3
</div>
</div>
<div class="col-md-9">
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4>Artist 1
</h4>
<p>Want to know when "Artist 1" will next be performing live? CLick this link <a target="_blank" href="#">website here</a>.</p>
<p><strong>About "Artist 1"</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</div>
</div>
The issue can only be seen on wider displays and not on mobile sized displays. To put it into context i want the main paragraph to take the left half of the box its in, so i can embed a Spotify playlist in the right hand half of the box.
All help is much appriciated. Happy to buy someone a coffee that can help.
So i figured this out, i needed to add a <div class="row"> underneath the <div class="caption-full"> and then use new divs to seperate the left and the right of this new row.
Example of the code that fixed my issue (its not neat yet):
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<p class="lead">Our Artists</p>
<div class="list-group">
Artist 1
Artist 2
Artist 3
</div>
</div>
<div class="col-md-9">
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<div class="row">
<div class="col-md-7">
<h4>Artist 1
</h4>
<p>Want to know when "Artist 1" will next be performing live? CLick this link <a target="_blank" href="#">website here</a>.</p>
<p><strong>About "Artist 1"</strong>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="col-md-5">
<p>irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm a bootstrap newbie user, so if it is a stupid question I'm sorry with you!
I'm trying to turn-off the background from the last right col but I'm not able to do this.
You can see the picture; I would like to hide the grey above the red rectangle..
picture
Here is the code:
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="row">
<div class="col-lg-11 news">
<h2>NEWS</h2>
</div>
</div>
<div class="row news">
<div class="col-lg-3">
<h3>Title</h3>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-1"></div>
</div>
</div>
</div>
Here is the code on an online editor
Thank you in advance!
so if you want to hide that little white area
change col-lg-11 to col-lg-12 :
<div class="col-lg-12 news">
<h2>NEWS</h2>
</div>
Why don't you fill the space?
<div class="col-lg-12 news"> <h2>NEWS</h2> </div>
Maybe something like:
<div class="col-lg-1 no-background"></div> // added class
CSS:
.no-background { background: none; }
I solved editing the number of "mother"-row column and its nested items: http://www.bootply.com/vcMjA3iMA5
I have a link
<li>Download
</li>
which links to
<div class="jumbotron second" id="download">
<div class="container">
<p>
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</p>
I am using bootstrap jumbotron on the div.
My Problem is that when I click on the link I do not get to the top of the Jumbotron but directly to the text. This is because of the padding from the text which seems to be ignored.
I tried it on another page without bootstrap and there it links to the top of the div, not directly to the text.
How can I make the link go to the top of the Jumbotron?
To solve this, I like to put the anchor on another element, above the first.
<span id='download'> </span>
<div class="jumbotron second">
<div class="container">
edit:
you could just add a space to it. I like how generic/non-semantic this is because it's done to affect behavior, and thus shouldn't have semantic meaning.
edit: in that case:
isn't the better solution to add the padding to your body?
body {
padding-top: 50px;
}
I solved my particular problem by adding an extra 50px of padding-top to the jumbotron.
I have the standard bootstrap navbar which is 50px high and was lying perfeclty over the 48 px padding of the jumbotron which made it seem like the link is snapping on the text.
I forgot to say that I am using the fixed navbar. Sorry for that.