I'm displaying an info block with 3 rows in bootstrap. I'm using bootstrap cols to make these responsive. For smaller screns I'm using col-sm-4 and for larger screens I'm using col-lg-3, to make my images fit.
<div class="container clearfix row" style="
width: 100%;
display: table;
margin: 0 auto;">
<!-- post list -->
<div class="test col-sm-4 col-md-4 col-lg-3" style="
display: table-cell;
margin: 0 auto;">
<figure>
<img alt="" src="assets/icons/find-awesome-stories.png">
<figcaption>
<span>
test3
</span>
</figcaption>
<!-- / post item wide -->
</figure>
</div>
<div class="test col-sm-4 col-md-4 col-lg-3" style=" display: table-cell; margin: 0 auto;">
<figure>
<img alt="" src="assets/icons/make-them-yours.png">
<figcaption>
<span>
test 1
</span>
</figcaption>
</figure>
</div>
<div class="test col-sm-4 col-md-4 col-lg-3" style="
display: table-cell;
margin: 0 auto;">
<figure>
<img alt="" src="assets/icons/show-it-off.png">
<figcaption>
test2
</figcaption>
</figure>
</div>
<div class="clear"></div>
</div>
Now, my challenge is that I'm not able to center these elements. I've tried using margin: 0 auto, making them table-table-cell, and even tried the inline-block trick. But nothing seems to work. Can you please help me with this thanks.
Here's the link to the fiddle http://jsfiddle.net/WJ3U9/2/
First
change your :
<div class="container clearfix row" style=" width: 100%; margin: 0 auto;">
to
<div class="container">
because your markup is incorrect in the first place.Then,
add this to your markup css..... ( just checked it for wide screen, not small ones )
.test {
border:1px solid #000;
margin: 0 auto;
overflow:hidden;
}
figure > img {
width:100%; /* make image fit inside div*/
height:auto;
}
demo here
have you tried text-align: center;?
I think the default align is left！
you may try it out!
Related
I would like to align some icons and some text in a nice grid like fashion.
The text needs to be centerd under the second icon.
It would have to look like this.
____ ____ ____
| | | | | |
|ICON| |ICON| |ICON|
|____| |____| |____|
TEXT
Is there any easy way to achieve this?
create a row div and give it 100% width and float left and inside this div create 3 div as a col div and give each 33% and float left and place your icon inside these div..now create another row width 100% float left now place p tag inside it and style this p tag text-align:center now you will see your text always below 2nd icon img....
<div style="width:100%;float:left;">
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
</div>
<div style="width:100%;float:left;">
<p style="text-align:center;"> You Text Here..</p>
</div>
Create a class that controls the size of each of the areas that hold your icons. As a sample i just used px but if you want it responsive then i would suggest that you use %. With a holder for each icon you can easily add text below, this will then stay nicely aligned.
Sample code snippet:
.pull-left {
float: left;
}
.icon-box {
width: 100px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
border: 1px solid;
margin: 0 auto;
display: block;
}
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
<p>Text</p>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
you can do it quite easily. You need to use list item & display inline with text center property. Like below code -
HTML portion
<div id="test1">
<ul>
<li>
<img src="" alt="num1">
</li>
<li>
<img src="" alt="num2">
<br/>
121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>
CSS for it
#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center;
}
Have you heard from bootstrap 3 ? It has a lot of features that help you with responsive alignment.
An example of this would be :
<div class="row">
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
</div>
One way I could think of is to create 3 container (for example 3 divs) with a css property on width (let say 33% width each, or something smaller if you need to add margin (you could even use px not %, but I recommand % for responsivness) with a float left property. Those divs will contain the icons, then you create another 3 icons with the same propreties that will display under the icons. Now you just have to put the text in the center one with text align center and that's it. You gave us few informations so I can't help you better than this.
Here you have an example of what I meant, you just need to implement it by your needs.
html:
<div class="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="text_empty"></div>
<div class="text"></div>
<div class="text_empty"></div>
css:
.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.
Here's a JSFiddle of what I've tried
Here's what I'm trying to do:
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
Here's the best I can come up with:
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
What I've tried:
Here's what I started with:
<div class="row vertical-align">
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
</div>
I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:
<div class="row">
<div class="col-sm-4">
<div><img src="../img/my-image-1.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-2.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-3.png"></div>
</div>
</div>
In my CSS file, I added these classes:
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.
I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:
How to vertically align an image inside div
I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.vertical-align {
letter-spacing: -4px;
font-size: 0;
}
.vertical-align .col-xs-4 {
vertical-align: middle;
display: inline-block;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
please try this and lemme know if this is what you wanted
<style>
img {
height: auto;
width: 100%;
}
.vertical {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.abcd {
min-width: 5em;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical">
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
</div>
</div>
</body>
I have created a little workaround. The real problem is that the <a> element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-image property. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.
https://jsfiddle.net/f9ogw26n/21/
.wrapper {
height: 200px;
width: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#" title="">
<div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
</div>
</a>
</div>
</div>
</div>
I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?
this is the image I need to make.
Click here
HTML and CSS code:
.img-big{ height: 100%;width: 100%; }
<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div
the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767
You can use the flexbox property to achieve what you want and set the image as background.
body, html {
margin: 0;
padding: 0;
color: white;
}
.container {
height: 767px;
display: flex;
}
.left {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 1;
}
.right {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.one {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
.two {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
<div class="container">
<div class="left">Left image</div>
<div class="right">
<div class="one">First image</div>
<div class="two">Second image</div>
</div>
</div>
In Bootstrap 5, you can use d-grid gap-x. For example:
HTML
.content {
background-color: transparent;}
.content .left, .content .right {
float: left;}
.full-width-band-hd {
margin-top: -35px;}
.txt-yellow {
color: var(--bs-yellow);}
<section class="container-lg">
<div class="content row">
<h2 class="txt-yellow full-width-band-hd">Head</h2>
<!-- Left Side -->
<h6 class="text-yellow">H6 head</h6>
<h3 class="text-yellow">H3 head</h3>
</div>
<!-- style in content row will become a class later-->
<div class="content row" style="height: 642px;">
<div class="col-md-4 left d-grid gap-3">
<div class="">
<img src="image1" width="100%" height="auto" alt="fp1">
</div>
<div class="">
<img src="image2" width="100%" height="auto" alt="fp2">
</div>
</div>
<!-- End of Left Side -->
<div class="col-md-8 left">
<div class="">
<img src="image3" width="100%" height="auto" alt="fp3">
</div>
</div>
<!-- End of col-md-8 -->
</div><!-- content row -->
</section>
You should format your code like below:
<div class="row">
<div class="col-md-8">
<img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
<div class="col-md-4">
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
</div>
As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.
You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)
With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?
I'm using bootstrap 3, and I have problems when I want to align vertically two div, for example ( http://jsfiddle.net/Xelnag/335nhneq/ )
<div class="row">
<div class="col-sm-6 vbox">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-sm-6">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
CSS for "vbox" is just a vertical align:
.vbox { vertical-align: bottom; }
What i would like to see is left div aligned to bottom to match the right side.
I have seen answers in stackoverflow with the use of javascript but so far i have found none that works with just CSS with the bootstrap 3 responsive design.
I found the best way. You need to follow below code.
Check out this fiddle: http://jsfiddle.net/harnishdesign/335nhneq/2/
HTML
<div class="row">
<div class="table-container">
<div class="col-xs-6 vbox" style="border:1px solid #000">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-xs-6 vbox" style="border:1px solid #F00">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
</div>
CSS
.table-container .vbox {display: table-cell;
float: none;
vertical-align: bottom;
}
.table-container {
display: table;
table-layout: fixed;
width: 100%;
}
.icon-16
{
width: 16px;
height: 16px;
}
.icon-32
{
width: 32px;
height: 32px;
}