So I keep trying to align images and text to the center and they keep appearing on the left side of the screen can someone help.
<div class="container">
<div class="col-md-6 col-sm-6 hidden-xs">
<div class="row">
<p class="borderexample3">
<font color="white" class=> Recent News</font>
</p>
</div>
<h1><font color="white"><font face="roboto-bold,roboto,sans-serif"<h1 align="right">Keep Updated!</font></h1>
<div style="text-align: center"><img src="assets/img/fwah.jpg" /></div>
</div>
</div>
This is what shows up.
http://prntscr.com/kgc5c2
I would like it where my red guidelines are on this image.
http://prntscr.com/kgc5tn
Try pushing your columns using col-sm-push-#.
<div class="col-sm-push-3 col-sm-6 hidden-xs">
try this
<div class="container" align="center">
I guess you have to add the following lines in wherever you want to make it center:
style="text-align:center;"
<div class="container">
<div class="col-md-6 col-sm-6 hidden-xs">
<div class="row">
<p class="borderexample3" style="text-align:center;">
<font color="black" class=""> Recent News</font>
</p>
</div>
<h1 style="text-align:center;"><font color="black"><font face="roboto-bold,roboto,sans-serif"<h1 align="right">Keep Updated!</font></h1>
<div style="text-align: center"><img src="assets/img/fwah.jpg" /></div>
</div>
</div>
Related
In the following picture as you can see "Colton Smith" is coming in two lines. What should I do to prevent this? I want to display in the same line.
Here is my code
<div class="row mt-5" id='imag'>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-1">
<img src="images/image-colton.jpg" alt="" />
</div>
<div class="col-lg-3" id="intro">
<h6>Colton Smith</h6>
<h6>Verified Buyer</h6>
</div>
</div>
<div class="row">
<p>
"We needed the same printed design as the one we had ordered aweek prior. Not only did they find the original order, but we alsoreceived it in time. Excellent!"
</p>
</div>
</div>
</div>
here is the image of above code
In your code change <div class="col-lg-3" id="intro"> to <div class="col-lg-11" id="intro">
I have a responsive bootstrap table (1 tr and 3 td) and when it comes to xs devices I want them to flow down.
<div class="container-fluid" id="maincontent">
<div class="table-responsive">
<table class="table"><tr><td>
<div class="thumbnail" id="tropthumb">
<img src="images/mainconimg/trophy.jpg" alt="trophies" id="mainconimg">
<div class="caption">
<h3 id="trop">Trophies</h3>
<p>View</p>
</div>
</div>
</td>
<td>
<div class="thumbnail" id = "medalthumb">
<img src="images/mainconimg/medals.jpg" alt="trophies" id="mainconimg2">
<div class="caption">
<h3 id="medal">Medals</h3>
<p>View</p>
</div>
</div>
</td>
<td>
<div class="thumbnail" id = "souvnthumb">
<img src="images/mainconimg/souvn.jpg" alt="trophies" id="mainconimg3">
<div class="caption">
<h3 id="souvn">Souvenirs</h3>
<p>View</p>
</div>
</div>
</td></tr></table>
</div>
</div>
**I have this table with single row and 3 td on it and each of td contains a thumbnail image. And when it comes to xs devices I want them to flow down like in the example picture please help me with this.
this is what i wanted to look like when it comes to xs devices
Are you using tables for a specific purpose? Because if not, you can use the grid on Bootstrap.
e.g.
<div class="row">
<div class="col-md-4 col-xs-12"> "your image here" </div>
<div class="col-md-4 col-xs-12"> "your image here" </div>
<div class="col-md-4 col-xs-12"> "your image here" </div>
</div>
But you can omit the code col-xs-12 because I think col-md-4 automatically flows them down if you resize your screen.
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>
I'm having trouble style/adding a header above my navbar. I was able to add the header but the alignment is completely off.
I'm trying to have it align with the first navbar button. May I ask how do I create/edit my header such that it'll align with the navbar.
<div class="container" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
http://codepen.io/anon/pen/RrwvNa
I was able to get it to align using this code
<nav class="navbar" style="background-color: #00a3a3;">
<div class="container-fluid col-sm-1">
</div>
<div class="col-sm-7">
<div>
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</nav>
but there seems to be a space between the header and the nav bar.
Here is the solution. Take a look in Codepen
Change your container to container-fluid and use margin-left:8.5% in your h1 header.
<div class="container-fluid" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="margin-left:8.5%;color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}