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
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 need some advice to make bootstrap panel header responsive. Panel has title with several buttons on the right side. It looks fine in large screen but looks ugly when browser size is small.
My full code here jsfiddle.
.panel {
margin: 15px;
}
.panel-title {
padding-top: 7px;
font-size: 20px;
}
.mr-10 {
margin-right: 10px;
}
<div class="panel panel-success panel-br-4">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<i class="fa fa-file-text" aria-hidden="true"></i> <span>Documents</span>
</h4>
<a id="document-сreate-btn" class="btn btn-success pull-right">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
<a class="btn btn-warning pull-right mr-10">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
<a class="btn btn-warning pull-right mr-10">
<span>Save new order</span>
</a>
</div>
<div class="panel-body">Some content</div>
</div>
When all items cannot fit in one line, I want to make header as in the next picture:
Is such things makes by flexbox or bootstrap grid system? Whats the better way? I will appreciate any examples! :)
This is just a quick example of how to use Bootstrap grid system. It's not gonna be as perfect as you want but it will give you an introduction to grid systems. Also, don't forget to read about media queries.
<div class="panel panel-success panel-br-4">
<div class="panel-heading">
<div class="row">
<div class="col-sm-6">
<h4 class="panel-title">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>Documents</span>
</h4>
</div>
<div class="col-sm-3" style="display: flex">
<a class="btn btn-warning mr-10">
<span>Save new order</span>
</a>
<a class="btn btn-warning">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
</div>
<div class="col-sm-3">
<a id="document-сreate-btn" class="btn btn-success mr-10" data-url="">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
</div>
</div>
</div>
<div class="panel-body">Some content</div>
i want to make notifications (li) scrollable when i put the li of notification in one div class="notification-body" it doesn't give me the result i want as bellow on the picture.
<li ng-if="vm.logged">
<div class="dropdown">
<button class="btn-noti" id="dropdownNoti" ng-click="vm.showDropdown($event)">
<span class="fa fa-bell-o"></span>
</button>
<ul class="dropdown-menu notification-menu" aria-labelledby="dropdownNoti">
<div class="col-md-12 col-xs-12" style="border-bottom: #655771;border-bottom-style: double;">
<h5 class="notification-title"><i class="fa fa-bell"></i> Notifications</h5>
<a class="mark-all" ng-click="vm.markAllRead()">Mark all as read</a>
</div>
<div class="notification-body">
<li ng-if="!vm.notifications.length"><a>You have no new notification yet.</a></li>
<li class="notification-type" ng-repeat="notification in vm.notifications" ng-style="{'background-color': notification.unread==false? 'white' : '#f5f5f5'}" style="border-bottom-style: ridge;">
<a ui-sref="profile({id: post.user.id})">{{notification.description}}
<h6><i class="fa fa-clock-o"></i> {{vm.timeOf(notification)}}</h6>
</a>
<a class="mark-as btn btn-default " ng-click="vm.markAsRead(notification)" data-toggle="popover" data-trigger="hover" data-content="as read" ng-class="{'add-white' : notification.unread==true }" ></a>
</li>
</div>
</ul>
</div>
</li>
By setting Height and Width property of not-body style you can achive it.
<div class="not-body" style="height:200px; width:100px; overflow:scroll;">
Try doing it. I think it'll work as you want.
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.
I created the following:
<div style="margin-top: 1.2em">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
</div>
Can someone tell me how I can make it so clicking on one of these icons or a word below it takes me to a link?
What I would like to do is to make it so the icons appear like this:
xxxxxx xxxxxx xxxxxx
xxxxxx xxxxxx xxxxxx
xxxxxx xxxxxx xxxxxx
Home Admin Setting
So that when I click anywhere from the top of the icon to the bottom of the words below that this is the same as clicking in an:
Home
Admin
Setting
link.
Update
I believe maybe I need a solution that uses DIVs. I tried both answers given to me and both make the icons appear vertical. Also the second answer maybe is not idea as it has multiple hrefs for the same link. Hope someone can help out with another answer.
No divs necessary. Something like this should work. fiddle
<a href="/home" class="icon-block">
<i class="icon-home icon-4x"></i>
<span>Home</span>
</a>
<a href="/admin" class="icon-block">
<i class="icon-th icon-4x"></i>
<span>Admin</span>
</a>
<a href="/settings" class="icon-block">
<i class="icon-cog icon-4x"></i>
<span>Settings</span>
</a>
CSS
a.icon-block {
display:inline-block;
width:10em;
float:left;
text-align:center;
}
a.icon-block i,
a.icon-block span {
display:block;
width:100%;
clear:both;
}
Try:
<div style="margin-top: 1.2em">
<a href="/home">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
<br />
<span class="normal">Home</span>
</a>
<a href="/admin">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
<br />
<span class="normal">Admin</span>
</a>
<a href="/setting">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
<br />
<span class="normal">Setting</span>
</a>
</div>
And then in your css, give the .normal class a different font family
.normal{
font-family: "Your Font";
}
Try this Div version.
<div style="margin-top: 1.2em">
<div class="go-inline">
<div>
<a href="/home">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
</a>
</div>
<div class="go-middle">
<a href="/home">
<span class="normal">Home</span>
</a>
</div>
</div>
<div class="go-inline">
<div>
<a href="/admin">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
</a>
</div>
<div class="go-middle">
<a href="/admin">
<span class="normal">Admin</span>
</a>
</div>
</div>
<div class="go-inline">
<div>
<a href="/setting">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
</a>
</div>
<div class="go-middle">
<a href="/setting">
<span class="normal">Setting</span>
</a>
</div>
</div>
</div>
and css class
go-middle{ text-align:center;}
go-inline { display:inline-block; vertical-align:top;}
P/s. some css/div structure editing will be fine.
Try to build it with your own style. =D