<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>
Related
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'm using bootstrap and I have some html like this:
<div class="col-sm-12 mainContainer">
<div class="col-sm-4 imagesContainer">
<div class="col-sm-12 firstImage">
<img src="myimage1.jpg">
</div>
<div class="col-sm-12 secondImage">
<img src="myimage2.jpg">
</div>
</div>
<div class="col-sm-8 textContainer">
<p>here we have some text</p>
</div>
</div>
What I would like is to set the "imagesContainer" of the same height of the "textContainer", put the first image on top of "imagesContainer" and second image to bottom of "imagesContainer".
So, when resizing, stretching or even putting an enourm amount of text, I'll always have a image on top, one at the bottom, and a lot of white space between those two.
Thank you for your help
Please use the same bootstrap class for the following:
<div class="col-sm-4 imagesContainer">
<div class="col-sm-8 textContainer">
After change it will be like:
<div class="col-sm-8 imagesContainer">
<div class="col-sm-8 textContainer">
Final solution will be:
<div class="col-sm-12 mainContainer">
<div class="col-sm-8 imagesContainer">
<div class="col-sm-12 firstImage">
<img src="myimage1.jpg">
</div>
<div class="col-sm-12 secondImage">
<img src="myimage2.jpg">
</div>
</div>
<div class="col-sm-8 textContainer">
<p>here we have some text</p>
</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>
I'm looking for the optimal method of centering a group of responsive bootstrap columns inside a row.
<li class="row hazRow">
//center this to the middle of the row
<div class="col-xs-3">
<img class="icon" href="#" title="icon" src="img/table/icon.svg">
</div>
<div class="col-xs-4">
<p>Title</p>
</div>
//end center
</li>
I was thinking of using just blank col either side, but feels like a waste and would not be able to center odd column(s) widths like 7.
I also tried wrapping the columns in a div with class of .center-block and .text-center, but this did not change the positions.
Should I abandon responsive bootstrap grids for this?
How can I center these columns?
You can accomplish this by borrowing slightly from Foundation
As others have suggested the first step is to nest your columns in an 'outer' column:
<div class="row">
<div class="col-xs-7 centered">
<div class="row hazRow">
<div class="col-xs-5">
icon.svg
</div>
<div class="col-xs-7">
<p>Title</p>
</div>
</div>
</div>
</div>
(Notice the outer column has your desired width of 7 and the inners now add up to 12)
Then add css to stop the outer column from floating and center it:
.centered {
float:none;
margin:0 auto;
}
jsfiddle example
This is where we use nested row and col classes...
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
For odd columns: (if you need 9 colums)
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4 col-md-offset-1"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
This will give you an approx 9 column width.
Try this...
<div class="col-xs-6 text-right">
<img class="icon" href="#" title="icon" src="img/table/icon.svg">
</div>
<div class="col-xs-6 text-left">
<p>Title</p>
</div>
Can't figure out why the columns aren't being structured with this HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
Try this:
DEMO
<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="image.png" />
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
</div>
You need to nest the interior columns inside of a row rather than just another column. It offsets the padding caused by the column with negative margins.
A simpler way would be
<div class="container">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
Your Nesting DIV structure was missing, you must add another ".row" div when creating nested divs in bootstrap :
Here is the Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"> About
</div>
<div class="col-md-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" width="100px" />
</div>
<div class="col-md-4"> SHARE
</div>
</div>
</div>
</div>
</div>
Refer the Bootstrap example description for the same:
http://getbootstrap.com/css/
Nesting columns
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
Here is the working Fiddle of your code: http://jsfiddle.net/52j6avkb/1/embedded/result/
While this does not address the OP's question, I had trouble with my bootstrap rows / columns while trying to use them in conjunction with Kendo ListView (even with the bootstrap-kendo css).
Adding the following css fixed the problem for me:
#myListView.k-widget, #catalog-items.k-widget * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Have you checked that those classes are present in the CSS?
Are you using twitter-bootstrap-rails gem?
It still uses Bootstrap 2.X version and those are Bootstrap 3.X classes. The CSS grid changed since.
You can switch to the bootstrap3 branch of the gem https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3 or include boostrap in an alternative way.
Make sure that you have linked the CDN link.
//Latest version v5
<div class="col-md-12"> // This line is optional.
<div class="col-md-4"> // Start from here.
About
</div>