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/
Related
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>
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
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.
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/
I have code like this:
<div class='outer'>
<div class='imgwrapper'><img /></div>
<div class='caption'>This is a long caption that should wrap...</div>
</div>
What I want is for the outer div to be the width of the image so that the caption under it wraps to the width of the image.
The images are all different sizes but the size cannot be accessed in code to give absolute pixel sizes. The css has to work for different sizes.
I cannot change the structure of the divs.
Can this be done?
Try this:
HTML
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" />
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:200px; height:200px;"/>
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:75px; height:75px;"/>
<div class="caption">
Caption
</div>
</div>
CSS
.box {
overflow:hidden;
background-color:#ddd;
display:inline-block;
}
img {
padding:10px;
}
Demo
http://jsfiddle.net/andresilich/8Bsgg/1/