I'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out.
Thank you
<header data-spy="affix" id="myHeader" class="container row">
<div class="col-sm-4 ">
<div class="centralize">
<a href="http://www.facebook.com" target="_blank">
<img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.twitter.com" target="_blank">
<img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.instagram.com" target="_blank">
<img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
</header>
Actually with {margin:0 auto; width:50%} it should work.
But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%
To center align the content within the class="centralize" divs, use:
.centralize {
text-align: center;
}
Related
So I have footer section on the website I'm currently building, and the problem is order of them showing. I want to social icons be above ©
Have a look: footer
html:
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
<div class="col-md-6">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
</div> <!-- end of row -->
</div>
css:
#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}
I tried to add class 'order-md-6' to each div with col-md-6, but first of all it didn't work, and secondly it broke layout - it 'pushed' both elements to center. Is it even possible in bootstrap4? I also have a problem centering these items u can see on image I've upload. I'm struggling with this for 2hours and I have no idea how to get this done. I would appreciate any help. Thanks
Bootstrap 4 uses flexbox to position the columns in their rows so you can add the following to your CSS to the control the order of the columns:
.col-md-6:last-child {
order: -1;
}
Not sure if what you provided is the full code sample of your footer or not, but if that's your full html, you're missing a closing tag.
Also, assuming all you want are the icons to go above the copyright line and centered, try this:
#footerbot .socialIcons {
text-align: center;
}
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="socialIcons">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
</div> <!-- end of row -->
</div>
</div>
I'm new to front-end development and am trying to get facebook share and twitter tweet buttons in the same line just below an image but am unable to do it.
<figure><img src=" " alt=""></figure>
<div class="row">
<a class="twitter-share-button" href="https://twitter.com/share" data-url=" ">Tweet</a>
<div class="fb-share-button" data-href="" data-layout="button" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&src=sdkpreparse">
Share</a>
</div>
</div>
No matter what I do I can't get them under the image, aligned on the right side. This is what I'm getting:
enter image description here
There are many many ways to do it
One way is display: inline-block and vertical-align: middle
Another modern way is use display flex for the parent element and align-self: center for the child elements
just resize your browser to see the result
<figure><img src=" " alt=""></figure>
<div class="row">
<a class="twitter-share-button"
href="https://twitter.com/share"
data-url=" ">Tweet</a>
<div class="fb-share-button" data-href=""
data-layout="button"
data-mobile-iframe="true">
THERE IS A LOT OF TEXT HERE
<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&src=sdkpreparse">
Share</a>
</div>
</div>
.row {
display: flex;
}
.fb-share-button, .twitter-share-button {
align-self: center;
}
https://jsfiddle.net/mpna771s/3/ for the flex way;
You could also float the elements
<div class="row">
<div class="smedia">
<div class="twitter">
<a class="twitter-share-button" href="https://twitter.com/share" data-url=" ">Tweet</a>
</div>
<div class="fb">
<div class="fb-share-button" data-href="" data-layout="button" data-mobile-iframe="true">
THERE IS A LOT OF TEXT HERE
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&src=sdkpreparse">Share</a>
</div>
</div>
</div>
</div>
CSS
<style type="text/css">
.smedia{width:100px;margion:0 auto}
.twitter, .fb{float:left;margin:10px;}
</style>
I'm trying to align each image to the left and right of the text in the "wrapper2 panel-footer center-block" div. It correctly aligns the left image, but the right image is actually going "under" the div for some reason.
.wrapper2 {
max-width: 800px;
float: none;
margin: 0 auto;
}
<div class="wrapper2 panel-footer center-block">
<div class="pull-left">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
<p><small>Copyright © All Rights Reserved.</small>
</p>
<div class="pull-right">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
Any reason for this?
To align divs next to each other in Bootstrap you utilize columns. There are 12 columns in a row, so in the example below I put each element in a 4 wide using the col-xs-4 class.
I also added the img-responsive class to both of the images so they scale down correctly on smaller devices.
<div class="wrapper2 panel-footer">
<div class="col-xs-4">
<div class="pull-left"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
<div class="col-xs-4">
<p><small>Copyright © All Rights Reserved.</small></p>
</div>
<div class="col-xs-4">
<div class="pull-right"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
</div>
Here's a working fiddle link: https://jsfiddle.net/88ebLj7e/
You can find more information on the Bootstrap grid here: https://getbootstrap.com/examples/grid/
<p> Tag is outside the pull-left class. That's what made it looks "under" the div. When you use pull-left. all should be INSIDE the class.
From your codes, <p><small> belongs to wrapper2 not pull-left or pull-right.
If you need more flexible usage, you can use what James Ives suggest. Otherwise, you should change it into like this:
Add one line in your stylesheet as follows:
<style>
.wrapper2 p{float:left; padding-left:30%;}
</style>
<div class="wrapper2 panel-footer center-block">
<div class="pull-left"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
<p><small>Copyright © All Rights Reserved.</small></p>
<div class="pull-right"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
So, what you need now is to decide padding-left value.
Hopes, it helps.
I have a three column layout and one of them is like -
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
<div class="mask">
</div>
<img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
</a>
<div class="image_links">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
<i class="icon-search">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
I want to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?
Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>