I am trying to center some icons in bootstrap columns, and they are centered when the page is large, but when the width gets smaller the icons shade to the right inside their columns. This might be hopeless, but is there any way for me to keep the icons centered no matter the size of the window?
Here is the HTML
<div class="row text-center" style="padding: 4px 2.5em 4px 2.5em;">
<div class="col-xs-3 text-center">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-twitter-square"></i></a>
</div>
<div class="col-xs-3">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-instagram"></i></a>
</div>
<div class="col-xs-3">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-facebook-square"></i></a>
</div>
<div class="col-xs-3">
<a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-google-plus-square"></i></a>
</div>
</div>
Here is a jFiddle:
http://jsfiddle.net/3ufoa55d/
This happens because of left and right paddings in the bootstrap "col-xs-3" style.
I added this css to your fiddle, and it works fine for me:
.icons-group .col-xs-3 {
padding: 0;
}
also i marked your
<div class="row text-center icons-group" style="padding: 4px 3em 4px 3em;">
div with "icons-group" style to set scope for above css.
Related
I'm trying to border a div that contains 4 fa-icons. Since I've set the parent div as Container, the border is automatically occupying large padding on the left & right sides horizontally. I've also tried nesting bootstrap grids, but it's not helping. Can anyone please help with this?
NOTE: Padding should not be greater than 1px on all sides and the div should exactly be in the center of the page.
HTML:
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
</div>
CSS:
#socialIcons {
position: relative;
text-align: center;
margin-top: 300px !important;
border: 1px solid white;
}
UPDATE: After applying Jeff's answer, this is closer to what I needed, but still has the automatic padding on the right side of the GitHub icon. Any idea why?
You could do something like this (when you swap your icons with my span's, it should give you the proper padding on top and bottom):
Codpen
Instead of hard coding text-align: center;, just add the class text-center through Bootstrap. Also, notice I added justify-content-center to the row.
<div class="container text-center" id="socialIcons">
<div class="row justify-content-center">
<div class="border">
<a href="https://www.google.com">
<span>google</span>
</a>
<a href="https://www.google.com">
<span>youtube</span>
</a>
<a href="https://www.google.com">
<span>fb</span>
</a>
<a href="https://www.google.com">
<span>twitter</span>
</a>
</div>
</div>
</div>
and CSS:
#socialIcons {
position: relative;
margin-top: 300px !important;
}
.border {
border: 1px solid black;
padding: 1px;
}
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12" style="border: 1px solid white;">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
I hope above code will helps you
If your icons should be center-aligned - you don't need to use div element with container class. Just add a div wrapper with custom class, and add your styles on it.
I have 3 evenly sized columns within a bootstrap container class which I would like to display on the same row. (Until they all collapse simultaneously on a smaller screen) Currently, the first two columns align horizontally, but the third is positioned directly below the first. I have spent some time adjusting my CSS and html, but to no avail.
I've browsed for a relevant answer to my question, as I was sure this is quite a simple problem to fix, however I have not been able to find anything. Any solutions would be greatly appreciated.
(Bootstrap v4.4.1)
.cmsInterface {
background: yellow;
margin: 1em;
padding: 1em;
padding-top: 5em;
padding-bottom: 5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 cmsInterface" id="cms1" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit a News Article <i class="far fa-edit"></i></h5>
</div>
<div class="col-lg-4 cmsInterface" id="cms2" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit an Event <i class="far fa-calendar-times"></i></h5>
</div>
<div class="col-lg-4 cmsInterface" id="cms3" align="center">
<h5><i class="fas fa-chevron-right"></i> Add/Edit Staff <i class="fas fa-user-alt"></i></h5>
</div>
</div>
</div>
A screenshot of how the code currently looks in a browser:
columns in boostrap are supposed to stick to each others , to allow margin, you may only use .col without a number, and eventually add the -lg breakpoint:
example turning : <div class="col-lg-4 cmsInterface" id="cms2" align="center"> into <div class="col-lg cmsInterface" id="cms2" align="center">
.cmsInterface {
background: yellow;
margin: 1em;
padding: 1em;
padding-top: 5em;
padding-bottom: 5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg cmsInterface" id="cms1" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit a News Article <i class="far fa-edit"></i></h5>
</div>
<div class="col-lg cmsInterface" id="cms2" align="center">
<h5><i class="fas fa-chevron-right"></i> Create/Edit an Event <i class="far fa-calendar-times"></i></h5>
</div>
<div class="col-lg cmsInterface" id="cms3" align="center">
<h5><i class="fas fa-chevron-right"></i> Add/Edit Staff <i class="fas fa-user-alt"></i></h5>
</div>
</div>
</div>
Demo : https://codepen.io/gc-nomade/pen/OJPrOqW
I want the image on the left to be with no padding or margin as the photo below in the jsfiddle
https://jsfiddle.net/pq7cxg8e/4/
<div class="box-blanco">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-2 hidden-xs">
<a href="salas-estudios/caravaca-ds55">
<img src="http://lorempixel.com/100/100/sports/1" alt="Caravaca" width="85" height="68"></a>
</div>
<div class="col-xs-10 col-sm-10 col-md-9 col-lg-10">
<span class="text-muted visible-xs pull" style="color: #A6A6A6; font-size: 12px;"><i class="fa fa-fw fa-map-marker"></i>Chacarita</span>
<h5>Test Title</h5>
<div class="col-separador-s"></div>
<p class="text-muted" style="font-size: 12px;">
<span class="text-muted hidden-xs" style="color: #A6A6A6;"><i class="fa fa-fw fa-map-marker"></i>Chacarita</span>
<span class="text-muted" style="color: #A6A6A6;"><i class="fa fa-fw fa-phone"></i>4000-8531</span>
<span class="text-muted" style="color: #A6A6A6;"><i class="fa fa-fw fa-mobile fa-lg"></i>15-4000-7713</span></p>
</div>
</div>
</div>
Thanks in advance
The
padding: 10px!important;
Causes the image to be padded, if you want to size the div to a particular size then do that. Otherwise keep padding # 0.
Changing the image size will also change the size of the box.
As you can see in the fiddle: https://jsfiddle.net/gcampton/do34opoo/1/
I'm currently using 2 Font Awesome icons. The problem is that I want to add text under each one that align with these icons. The problem is that the text is centered on the page but not under the corresponding icons.
Code:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<a href="#about" class="btn btn-circle page-scroll btn-lg">
<i class="fa fa-angle-double-down animated"></i>
</a>
<a href="#contact" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>About Contact
</div>
I think this is what you want to do. Here is the fiddle:
http://jsfiddle.net/plushyObject/02s7wnm8/
<div class="col-md-8 col-md-offset-2 text-center outline">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<div class="col-sm-4 outline">
<a href="#about" class="btn btn-circle page-scroll btn-lg outline">
<i class="fa fa-angle-double-down fa-fw"></i>
</a>
<p class="outline">
Text is centered by 'text-center' class inherited from first
column.
</p>
</div>
</div>
If you text-align the parent element, it will be inherited by the picture.
CSS
.container {
text-align: center;
}
Line it up using an HTML <table>, and style it with CSS. That way it will stay on top of the icons correctly.
http://jsfiddle.net/vd6smL75/
I've got the following problem:
I have two circles that are put one on top of the other. I would like them next to each other. Here is the HTML for the above picture:
<div class="col-lg-6">
<div class="page-scroll" style="text-align:center !important;" id="arrow2">
<a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="page-scroll" style="text-align:center !important;">
<a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>
I have followed the following link and get the following:
Here is my HTML for this:
<div class="col-lg-6">
<div class="page-scroll" style="text-align:center !important;float:left;" id="arrow2">
<a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="page-scroll" style="text-align:center !important;float:left;">
<a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>
So my question is how can I get these two buttons next to each other but in the middle of the text block?
I would put them both in the same div, set the style of each to block and then your text-align center will affect them. Also you should probably take the float left off, because that is sending them to the left of the page.
The winning answer was:
<div style="display: inline-block; margin-left: auto; margin-right: auto;">
<div class="page-scroll" style="text-align:center !important;float:left;padding-right:2%" id="arrow2">
<a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="page-scroll" style="text-align:center !important;float:left;" id="arrow4">
<a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>
Put both of your icons in the same div. They were stacking on top of each other before because you had them in separate divs. After that, you can text-align: center; for the parent div which holds them both and that should work.
Something like this for illustration:
<div class="col-md-6">
<div class="page-scroll text-center">
<i class='fa fa-angle-double-up'></i>
<i class='fa fa-angle-double-down'></i>
</div>
</div>
I just tested this in a bootstrap project im working on it worked for me as you desired