how to center two images use Bootstrap3 - html

It works fine in big screen but on the mobile it's broken to two lines. One image on the left the other on the right.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 r">
<img src="img/qr.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
<div class="col-md-6 l">
<img src="img/weixin.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
</div>
</div>
CSS
.l{text-align: left; padding-top: 10px;}
.r{text-align: right; padding-top: 10px;}


You can use float:
HTML:
<center>
<div class="container">
<div class="row">
<div class="col-md-6 r">
<img src="img/qr.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
<div class="col-md-6 l">
<img src="img/weixin.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
</div>
</div>
</center>
CSS:
.l{display: block; padding-top: 10px; float: left; }
.r{display: block; padding-top: 10px; float: right;}
http://jsfiddle.net/2jag6/


try using .pull-right on first image and .pull-left on second image. no reason to create all new classes for classes already available in bootstrap.


To keep both images in the same row in mobile view too, just add the bootstrap class col-xs-6 class next to col-md-6 class in your both divs, like:
<div class="col-md-6 col-xs-6">

Related

Mobile Responsive section

I have a bit of an issue with a site I am creating. I need an alternative of float: left; for these icons. below I will upload two screenshots of the mobile screen and the computer screen.
Computer Size
Mobile Size
This is my code:
.featureIcon {
width: 70px;
float: left;
}
.featureRowSplit {
padding-bottom: 30px;
padding-top: 20px;
}
.featureText {
font-family: 'Lato', sans-serif;
color: #146eff;
margin-left: 80px;
}
<div class="row">
<div class="col-md-8">
<div class="row featureRowSplit">
<div class="col-md-4">
<img src="img/FeatureIcons/1.png" class="featureIcon">
<h3 class="featureText">Cheap</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/2.png" class="featureIcon">
<h3 class="featureText">Friendly</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/3.png" class="featureIcon">
<h3 class="featureText">Clean Code</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/FeatureIcons/4.png" class="featureIcon">
<h3 class="featureText">Quick</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/5.png" class="featureIcon">
<h3 class="featureText">Helpful</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/6.png" class="featureIcon">
<h3 class="featureText">Reliable</h3>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Best Regards,
Ben J

Do want them to align in one column? If so, you can set the whole thing in an unordered list and put the image and header in there. For the css, put list-style-type:none;for the unordered list, and put display:block;and float:left; for the actual li elements.

How to align an image horizontally center within a div?

I have this below HTML Code:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
I tried this and lot more but couldn't align it to center.

apply style text-align:center to div as:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto;text-align:center">
<img src="~/images/loader.gif"/>
</div>
</div>
</div>

Add only this css to #loadme{text-align:center;}
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; text-align:center">
<img src="~/images/loader.gif" />
</div>
</div>
</div>

Do This ..
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" class="text-center" style="display:block; margin: 0 auto !important;">
<img src="~/images/loader.gif" />
</div>
</div>
</div>

The DIV containing your IMG should be a display: block;
The image should be a display: inline-block; or its initial state;
By default images or any display: inline-block; objects are much treated like text, so you'll have to assign text-align: center; to your DIV;
Hope this helps you in future.

In css,
#loadme { display:grid; align-items:center;}
Using CSSGrid

Bootstrap img-responsive class not working correctly

I am currently having a problem where the bootstrap img-responsive class isn't working as it should due to me needing the image to be as far right in the div box as possible. I have two identically sized arrows which surrounds titles of my site. When the browser is scaled down to mobile size, the left arrow appears smaller and more distorted than the right counterpart.
Full Sized Title
Phone Sized Title
HTML:
<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-3 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-6 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-3 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>
CSS:
.arrow-right {
padding-top: 12px;
}
.arrow-left {
padding-top: 12px;
padding-left: 0;
}
#media (min-width: 768px) {
.img-right {
display: block;
margin: auto;
margin-left: 34px;
}
.img-left {
margin: auto;
margin-right: 30px;
}
}
My question would be, is there an easier way to get these arrows as close to the titles as possible and have them scale down to phone sized perfectly?

Change the XS and make 4/4/4
<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-4 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-4 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-4 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>

I think the blurry image is due to display: block, for getting the image as close to the text as possible you could consider using ::after or ::before pseudo-elements. Also you could try the following HTML:
<div class="col-xs-3 col-lg-2 arrow-right">
</div>
<div class="col-xs-12 col-lg-6 text-center">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
<h2 class="section-heading">RSVP</h2>
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
</div>
</div>
Also, could you post a fiddle or http://www.bootply.com/?
EDIT -- (after bootply response)
using a little CSS i got it working (without the use of media queries etc.). The CSS is now a lot less and I hope this is what you are looking for (because the images are as close as possible to the text). Using float: left to the img, h2 and a little padding-top: 24px for the images got it lined up. See bootply:
http://www.bootply.com/2Hp6stSs9B

image vertical align bootstrap with text

I want to know the proper way to put an image in the center of the page, and then beside the image vertical align 2 lines of text. should I put the image and text in one bootstrap coloumn or should i have the image in one coloumn and the text in a seperate coloumn. I know there are a few ways to do this, i just want to know the proper method.
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="font-size:24px;">Test second line. </span>
</div>
</div>
https://jsfiddle.net/k90s5fec/

This is the right way to do this
div{
display: inline-block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-4">
<p style="font-size:48px;">Test</p>
<p style="font-size:24px;">Test second line. </p>
</div>
</div>
This is the fiddle
NOTE : Use https:// when importing external resources,
use p tag instead of span if you want to use block texts.

use this
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="displa`enter code here`yed" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
</div>
</div>
img.displayed
{
display: block;
margin-left: auto;
margin-right: auto
}

<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div style="font-size:48px;">Test</div>
<div style="font-size:24px;">Test second line. </div>
</div>
</div>

How do I align images to the bottom of a nested div (in bootstrap)?

I want to align different size images to the bottom of a div but the images are also in their own divs so the other answers don't work.
I have the following HTML:
<div class="row footer-links">
<section>
<div class="col-md-4">
<p>
Proudly presented and sponsored by
</p>
</div>
<div class="col-md-8 col-xs-12 logo-links">
<div class="row logo-bottom">
<div class="col-md-2 col-xs-12 logo-border col-md-offset-1">
<img id="rasv" class="center-block" src="img/rasv.png" alt="RASV logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/victoria-farmers.png" alt="Victoria Farmers logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/anz.png" alt="ANZ logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/pwc.png" alt="PWC logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/vac.png" alt="VAC logo">
</div>
</div>
</div>
</section>
</div>
I used the following CSS:
.logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
}
Here is a Code Pen for more information.

You were really close.
The reason it wasn't working was because the columns are floated. Due to this, the elements weren't behaving like a table-cell, therefore rendering vertical-align: bottom useless.
You could simply add float: none and it will work as desired.
Updated Example
.logo-bottom .logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
float: none;
}
As a side note, I increased the specificity of the selector .logo-border to .logo-bottom .logo-border so that float: left was overridden.