Hi I am having trouble centering these figures. .col-centered is working on every other section that I have except for this one.
<section id="leadership" class="row col-md-7 company-leadership full-page col-centered">
<h2 class="about-title text-center">Leadership</h2>
<figure class="cap-bot col-md-2 team">
<img src="http://placehold.it/400x400" class="img-responsive">
<figcaption>
<h3>Jon Doe</h3>
<em>Title</em>
</figcaption>
</figure>
<figure class="cap-bot col-md-2 team">
<img src="http://placehold.it/400x400" class="img-responsive">
<figcaption>
<h3>Jon Doe</h3>
<em>Title</em>
</figcaption>
</figure>
<figure class="cap-bot col-md-2 team">
<img src="http://placehold.it/400x400" class="img-responsive">
<figcaption>
<h3>Jon Doe</h3>
<em>Title</em>
</figcaption>
</figure>
</section>
CSS:
.col-centered{
float: none;
margin: 0 auto;
}
Here is jsfiddle:
http://jsfiddle.net/fa6RU/
BTW - you might not be able to see the 3 figures inline because of your resolution so zoom out until you see the 3 figures under leadership. I want them inline but centered right under leadership.
Thanks!
The images and figcaption elements are not being centered, its probably easiest to create a selector for them and specify a centering attribute:
http://jsfiddle.net/fa6RU/2/
figure img { margin:0 auto; }
figcaption { text-align:center; }
Okay if that's the case, just remove
figcaption { text-align:center; }
from Lowkase's answer.
http://jsfiddle.net/4pMm2/1/
Related
I am working on Bootstrap website. I wanted to place text in the right side of the car. I am getting the output as:
I wanted to place text "hello" in the right side of the Car.
Code:
<div class="row text-center">
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt=""/>
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt=""/>
<figcaption>Hello</figcaption>
</figure>
</div></div>
CSS:
.main_auto {background:url(images/category/auto.gif) no-repeat;
background-size: 35% 75%;
}
.main_service {
width:254px;
height:136px;
float:left;
padding:20px 20px 0 90px;
}
I am new to Bootstrap.
You can use css position property. Declare image css position property as relative and text css position property as absolute.
Code:
<div class="row text-center">
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt="" class="img-disp" />
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt="" class="img-disp" />
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
</div>
CSS:
.img-disp{
position: relative;
}
.main_service {
position: absolute;
....
}
Than you can adjust your text position by adding top and left margin to .main_service class.
You can see result here : https://jsfiddle.net/8kcsryqy/
I'm trying to style a gallery using Bootstrap and Flexbox where there is one large image and beside it is two smaller, stacked images and have both be the same height.
The container columns seem to be doing their job and staying the same height but I need the img within the column to fill the height of the container.
It works in Firefox if I use height: 100% on the img but this breaks in both Chrome and Safari.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin-bottom: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4">
<figure style="margin-bottom: 30px;">
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
Here's the markup and stylesheet: https://jsfiddle.net/tylorreimer/q8qe5p80/2/
Looks to me as though you need nested flexboxes where you have multiple images on one side.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin: 0;
}
.rts-col.split {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 split">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
If you make the col-4 a flex container with column direction, you can then use justify-content and its space-between to align those 2 image top/bottom
Add d-flex flex-column justify-content-between to your <div class="rts-col col-4"> so it becomes <div class="rts-col col-4 d-flex flex-column justify-content-between">
Note, I also removed some of your margins to make them align better
img {
display: block;
max-width: 100%;
}
figure {
margin: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 d-flex flex-column justify-content-between">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
I'm trying to make a grid of Boostrap unevenly sized thumbnails. But some thumbnails are uneven, resulting in huge gaps between some rows.
I don't have any styling on the thumbnails.
Is there a way to fix it without adding something like Masonry/Isotope/Salvattore?
You can use two <div> or two .row tags like this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
For more info visit Example: Stacked-to-horizontal.
The cleanest way to fix your layout is to use a masonry type of layout. It will allow for the smoothest look and be a very fluid and responsive layout when dealing with mixed sized media. Though if you are in complete control of the data/images being placed on the site I would suggest creating each image to be identical in size and type. If you would like I can provide an example I have created using a masonry type of layout with thumbnails and Bootstrap.
Edit to add example code:
/* CSS styles */
.row {
-moz-column-width: 12em;
-webkit-column-width: 12em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
column-width: 12em;
column-gap: 1em;
column-fill: balance;
width: 100%;
}
/* Outer div block */
.section-block {
display: block;
padding: .25rem;
width: 100%;
}
/* Inner div block */
.section-item {
position:relative;
display: inline-block;
width: 100%;
}
.section-item img{
width: 100%;
}
//Wrapper for each img you are adding
<div class='section-block'>
<div class='section-item'>
<div>
<a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
<img src='/imgs/image.jpg'>
<p class='caption'>Image Caption</p>
</a>
</div>
</div>
</div>
I used this in conjunction with php to get all my images from a db then I looped over each image and echo'd to the page with the above syntax. This should work without having to use any additional js libraries beyond what you are using for bootstrap. This gives you a very responsive masonry style of layout that works in modern browsers.
I have this css code
#menu:hover img
{
margin-bottom:50px;
}
and html
<figure id="menu">
<img src="demo HTML/CaptionHoverEffects/demo 1/images/1.png"/>
<figcaption class="content">
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
At css code, when I change margin-bottom to margin-left or margin-right, it safe run, but with margin-bottom, it's not effect. How can I solve it?
#menu:hover img {
margin-bottom: 50px;
}
<figure id="menu">
<img src="http://placehold.it/350x150" />
<figcaption class="content">
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
I want to display 2 columns of images using "float:left", and I dunno why the 3rd image is on the right.
See screenshot:http://dl.dropbox.com/u/72686/imagesFloat.png
See HTML:
<div class="field-item odd">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br>
<span>description1</span> </div>
<div class="field-item even">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br>
<span>description2</span> </div>
<div class="field-item odd">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br>
<span>description3</span> </div>
<div class="field-item even">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br>
<span></span> </div>
see CSS:
.field-field-image .odd {
padding-right:20px;
}
.field-field-image .even {
padding-left:20px;
}
.field-field-image .field-item {
float:left;
}
thanks
It is on the right because there is room beside the first div.
Use clear: left on each element you want to start a new row.
Add margin-bottom:2px to the third image,see if the image goes anywhere. If not margin-bottom, margin-top then.