I am using bootstrap to layout my page.
On a particular screen width, the div becomes misaligned because the title of one of the div is very long which occupies another line.
If the div next to it also have a long title (so both of them occupies 2 lines), then the divs will be properly aligned.
How should I configure the divs so that regardless whether the title is very long or short, the divs will still be aligned, that is for this screen width, I should see two divs side by side, instead of seeing the 3rd div moved to the right and the 4th div moved on the next line?
CODE
<div class="container">
<div class="row">
forloop {
<div class="col-md-3 col-xs-6" style="margin-bottom: 25px">
<img>
<h3>
</div>
}
</div>
</div>
2 options:
you can clear:left at each 3 item.
.row > div:nth-of-type(2n+1) {
clear: left
}
<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 col-xs-6">
<img class="img-responsive" src="//placehold.it/300x300" />
<h3>Very big text here to make 2 lines</h3>
</div>
<div class="col-md-3 col-xs-6">
<img class="img-responsive"src="//placehold.it/300x300" />
<h3>text here</h3>
</div>
<div class="col-md-3 col-xs-6">
<img class="img-responsive"src="//placehold.it/300x300" />
<h3>text here</h3>
</div>
<div class="col-md-3 col-xs-6">
<img class="img-responsive" src="//placehold.it/300x300" />
<h3>text here</h3>
</div>
</div>
</div>
you can use clearfix bootstrap class for xs
<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 col-xs-6">
<img class="img-responsive" src="//placehold.it/300x300" />
<h3>Very big text here to make 2 lines</h3>
</div>
<div class="col-md-3 col-xs-6">
<img class="img-responsive" src="//placehold.it/300x300" />
<h3>text here</h3>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">
<img class="img-responsive" src="//placehold.it/300x300" />
<h3>text here</h3>
</div>
<div class="col-md-3 col-xs-6">
<img class="img-responsive" src="//placehold.it/300x300" />
<h3>text here</h3>
</div>
</div>
</div>
You can set a fixed size (height) for the <h3>, if you know it's maximum two lines of text.
Something like
h3{display:block;line-height:16px;height:32px;}
But #dippas suggestion is probably better.
Related
I am trying to create this:
I have the left and right image and the monkey image.
I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle.
Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3">
<img src="images/hero-left.svg" class="" alt="">
</div>
<div class="col-xs-6 col-md-126>
<h1 class="">
<b>monKey</b> Generator</h1>
<br>
<h2 class="">Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
class="" alt="">
</div>
<div class="col-md-3 col-sm-3">
<img src="images/hero-right.svg" class="" alt="">
</div>
</div>
</div>
</section>
There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job.
See the snippet below.
img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<img src="images/hero-left.svg" alt="monkey left">
</div>
<div class="col-6">
<h1>
<b>monKey</b> Generator
</h1>
<br>
<h2>Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
</div>
<div class="col-3">
<img src="images/hero-right.svg" class="" alt="monkey right">
</div>
</div>
</div>
</section>
I am trying to create a website with several images and content in columns using Bootstrap as a framework.
Is it possible to somehow make all of the columns automatically adjust to the height of the row? Here is my code:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
In the above example the two "col-md-3 col-xs-6" columns are not the same height as the "col-md-6 col-xs-12" column.
How can I make them adjust to the height of the row so that all of the content is in line?
Thanks.
You may use css flexbox to achieve same height for all the columns. So your code would be:
<div class="row heightadjust">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
and write a custom css
.heightadjust {
display: flex;
}
I've got a basic header with a logo on the far left and text on the far right (right aligned). As the page gets smaller the text overlaps with the logo and doesn't look great.
Fiddle here:
<div class="container">
<div class="row">
<div class="col-xs-2">
<img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
</div>
<div class="col-xs-10 text-right text-uppercase">
<h1>Scooby Doo</h1>
<h3>Where are you</h3>
</div>
</div>
</div>
How can I have everything shift to the middle and have my columns be centered on small screens? (logo on top, text underneath) Poured over Bootstrap documentation and can't figure it out with the grid system. If Bootstrap doesn't allow for that kind of re-positioning, is there a way with custom css/media queries?
You could use a combination of col-sm and col-xs to make sure they do not overlap
Fiddle
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-2">
<img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
</div>
<div class="col-xs-12 col-sm-10 text-right text-uppercase">
<h1>Scooby Doo</h1>
<h3>Where are you</h3>
</div>
</div>
</div>
As for aligning the text, you could use these media queries : https://github.com/twbs/bootstrap/issues/11292
Alternatively, if you would duplicate the block, you can achieve what you want with hidden-xs and visible-xs, however duplication is not something I would suggest as it reduces maintainability, but I added it to make the answer complete, as it is an option.
See this Fiddle which gives you this code
<div class="container">
<!-- Hidden only on XS, not centered -->
<div class="row hidden-xs">
<div class="col-sm-2">
<img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
</div>
<div class="col-sm-10 text-right text-uppercase">
<h1>Scooby Doo</h1>
<h3>Where are you</h3>
</div>
</div>
<!-- Only visible on XS, centered-->
<div class="row visible-xs">
<div class="col-xs-12 text-center">
<img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
</div>
<div class="col-xs-12 text-center text-uppercase">
<h1>Scooby Doo</h1>
<h3>Where are you</h3>
</div>
</div>
</div>
I've created an img-circle to be placed on the same row as a paragraph of text using two .col-xs-6, but my image is spilling over the margin of the container.
I have tried changing the padding to 0, but that didn't work.
I don't have any CSS styling for the img-circle currently.
<div class="container about">
<div class="row">
<div class="col-xs-6">
<p class="hello">Hello,</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="intro">text from paragraph here</p>
</div>
<div class="col-xs-6">
<img class="profile-pic img-circle" src="#"/>
</div>
</div>
you need to use class .img-responsive in img, see Bootstrap Docs
Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%;,
height: auto; and display: block; to the image so that it scales nicely to the parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container about">
<div class="row">
<div class="col-xs-6">
<p class="hello">Hello,</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="intro">text from paragraph here</p>
</div>
<div class="col-xs-6">
<img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" />
</div>
</div>
</div>
This is driving me nuts and it seems like the solution is a simple one I am overlooking. I have a row of three images and it is my understanding that bootstrap takes care of the alignment of content.
Shouldn't the third image be aligned to the right side of the container with all three being equally spaced?
http://codepen.io/amits/pen/oxbjmd?editors=1100
<div class="row">
<div class="col-md-4">
<img src="">
</div>
<div class="col-md-4">
<img src="">
</div>
<div class="col-md-4">
<img src="">
</div>
</div>
what am I missing?
you are missing the .container, and .img-responsive in img tag, plus you can have .col-sm-* for small devices and .col-xs-* for extra small devices.
added .col-xs-4 just for demo
take a look at the Docs
.container {
border: red solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4">
<img class="img-responsive" src="//lorempixel.com/1200/900">
</div>
<div class="col-xs-4 col-md-4">
<img class="img-responsive" src="//lorempixel.com/1200/900">
</div>
<div class="col-xs-4 col-md-4">
<img class="img-responsive" src="//lorempixel.com/1200/900">
</div>
</div>
</div>