I have 4 image div at the moment . And i want them to start aligning from the center . So that if anyone add more image div future it automatically align to the center.
Is it possible ?
use grid template provided by bootstrap and set the parent as container.
HTML
<div class="container">
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
</div>
As I understand this is what you want?
Full Layout
Yes, it is possible just you can try below code.
<div class ='container'>
<div class ='container-inner'>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
</div>
</div>
<style>
.container{
width:100%:;
}
.container -inner{
display: table;
margin:auto;
}
.image{
float : left;
}
</style>
Above code helps you to put all image container to center.
If you add single image to it it take only that width which is image width and align center, if more images take width according as align center.
Related
I have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link
I'm using Bootstrap and I'm having problem with CSS. I'm trying to align the columns so that the images inside each column have the same bottom line, not the top. I have tried everything I can think of but nothing seems to work. Can anyone help me to align the images correctly? So that the bottom of the images all match?
<div class="container marketing">
<!-- Sponsors logos-->
<div class="row featurette lastNew">
<div class="col-lg-4">
<img class="img-responsive midjasponsora" alt="1496x613" src="images/logos/Platinum/image1.png">
</div>
<div class="col-lg-4">
<img class="img-responsive" alt="180x52" src="images/logos/Platinum/image2.png">
</div>
<div class="col-lg-4">
<img class="img-responsive" alt="283x66" src="images/logos/Platinum/image3.png">
</div>
</div>
</div>
I found the answer.
I put this class on the columns and that was it.
.vcenter {
display: inline-block;
vertical-align: bottom;
float: none;
}
I have a large image which I want to display using the entire width of the browser.
My code is:
<html><body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3> Welcome! </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_image">
<img src="..."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_content">....</div>
</div>
</div>
</div>
</body></html>
Bootstrap will automatically create margins/padding to make the image fit in the center of the page.
Is there a way to always allow the main image to fit the entire width of the browser, but keep the padding/margins for everything else on the page?
Your best bet is to assign the image as a background-image.
Here's a JSFiddle (https://jsfiddle.net/qoaqjgpz) with only the most important stuff from http://startbootstrap.com/template-overviews/full-width-pics/.
The .html:
<div class="image-bg-fixed-height">
</div>
The .css:
.image-bg-fixed-height {
background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
height: 450px;
}
.img-center {
margin: 0 auto;
}
Let me know if this is what you were searching for.
I have a question regarding centering row vertically!
I have here a simple html, with use of bootstrap 3:
<div class="container">
<div class="row">
<div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<img data-src="holder.js/460x308">
</div>
</div>
</div>
</div>
I would like to center this container or row ... doesn't matter.
So imagine i have a window which is 500px x 500px
I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center
PS: http://jsfiddle.net/e89TE/
try this css:
.container{
display:table;
}
.row{
display: table-cell;
vertical-align: middle;
}
should work. ps. post a fiddle next time
First thing you will need to do if you want the type on TOP of the image is make the image a background image:
<div class="col-sm-12 text-center">
<div class="foo">
Some text text text text text …..
</div>
</div>
The css
.foo {
background-image:url("holder.js/460x308");
}
I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.
Here is my markup:
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
</div>
</div>
CSS:
.container {
max-width:1000px;
background-color:white;
}
body {
background-color:cyan
}
#picture {
width:auto;
/*margin-left:10px; */
/*margin-right:10px; */
}
.col-lg-4 {
margin-left:10px;
margin-right:10px;
}
Check my Fiddle for a clearer view. Is there a better way to go about handling this?
Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.
Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.
It should work now as you wish.
As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
</div>
</div>
If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?
First of all to get the DIV's in line change the following
.col-lg-4 {
display: inline-block;
}
try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?