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>
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 want to align col-lg-8 with col-lg-4 that contains 2 rows for 2 images, i need those 2 columns align perfectly so they fit each others height
i tried this:
desired look
and what i got
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Link to CODEPEN
While it is true that you can't depend on Bootstrap to do everything, you don't need any of the additional css "gymnastics" proposed by #derek-gutierrez because with native Bootstrap classes alone you can get done almost everything and most certainly in this particular case here.
The following code is leaner and does everything you want with native Bootstrap classes alone. No extra gymnastics needed. All with perfect paddings/gutter out of the box:
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
That's the magic of the Bootstrap grid just working.
Notice: You had 2 unnecessary divs (first row and col-lg-12). I cut them out. That was totally useless fat in your code. Don't put in more code than necessary. That reduces the number of potential problems.
Try below code, I hope this is what you are looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
You can't depend on bootstrap to do everything. You are going to add some of your own custom CSS to achieve the effect you want. If you are unfamiliar with css and selectors W3 schools is a good resource.
To achieve this effect add this CSS to the head of your document:
(This is simply to illustrate based off of your example, you will want to be more specific with your selectors if there is going to be more to this page)
<style>
img {
width: 100%; /* Makes imgs match the parent column/container width */
}
#top-image {
margin-bottom: 30px; /* Adds the necessary space to the bottom of the first image */
}
</style>
The columns inside the col-lg-4 should not be col-lg-2. This is basically saying these columns are 2/12ths the size of the container. Instead change them to 12 to span the full width of the container. I also added an id to the first image in this column "id="top-image" to add the necessary margin.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="img/1.png" />
</div>
<div class="col-lg-4">
<div id="top-image" class="row">
<div class="col-lg-12">
<img src="img/2.png" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="img/3.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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.
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>
<div class="row">
<div>
<img id="image" class="col-md-2" src="img.png">
</div>
<div id="otherPart" class="col-md-4">
</div>
</div>
I am using Twitter bootstrap to space my html objects and I want to make it so that my id="image" is dynamic and able to adjust its size depending on the size of the image. At the same time I still want to have the spacing between my image and and "otherPart". I tried deleting col-md-2 from image and adding margins in the css but it didn't work.
<div class="row">
<div class="col-md-2">
<div class="yourAdditionalMarginClass">
<img id="image" src="img.png" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div id="otherPart"> ... </div>
</div>
</div>
The image is responsive now, the basic padding of the col's is applied and if you need even more padding/margin, wrap another div around the image, give it a class and apply your styles to that class.
Remove the col-md-2 from the image and add it to the outer most div like:
<div class="row col-md-2">
...
</div>
Try this way
<div class="row">
<div class=" col-md-2">
<img id="image" src="img.png">
</div>
<div id="otherPart" class="col-md-4">
</div>
</div>