JS: http://jsfiddle.net/1cmtpnha/
I have this:
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
padding_5 just contains padding css
card-body is bootstrap 4
I tried this:
[class*="icon-"] {
display: inline-block;
width: 100%;
}
.icon-center i {
text-align: center;
}
and this:
.icon-center {
margin: auto;
display: block;
}
and neither worked. Those were top checked responses i saw on SO.
What is wrong with my code?
I want it to be horizontally centered within a card-body.
It's not the bootstrap either. I tested it on a separate page with no css or card-body. Still same issue.
You have three options here
1. Parent: text-align: center
set text-align: center to body.
2. Child: display: block and text-align: center
set display: block to .icon-center.
3. Child display: block , set width and margin: auto
set display: block , width: 20px and margin: auto to .icon-center.
https://codepen.io/blackcityhenry/pen/WPexKp
.icon-center {
text-align:center;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
Just add text-align: center; to the parent card-body
.card-body{
border: 1px solid red;
text-align: center;
}
.padding_5 {
padding: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />
<div class="card-body">
<div class="padding_5">
<div class="icon-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
Related
How to arrange nested divs next to each other using inline block or flex
I have 3 elements in my html.
One icon, and two text elements.
I want the icon to be on left and then the text on top of each other.
I am trying to do this using following html and css, which works partially. The icon is way down and I tried moving it up. More over , I think there is a better and right way of doing this.
body {
background-color: #D2D5DD;
}
.auto-complete-box {
display: inline;
margin-top: -20px;
}
.auto-complete-tag {
margin-top: 15px;
margin-left: 5px;
display: inline-block;
}
.tag-header {
text-transform: uppercase;
letter-spacing: 1px;
color: #0083cb;
}
.tag-description {
font-weight: 100;
font-size: 12px;
padding: 1px;
color: #798071;
margin-top: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div>
<div class="auto-complete-box">
<i class="fa fa-bars"></i>
</div>
<div class="auto-complete-tag">
<div class="tag-header">HeaderValue</div>
<div class="tag-description">Item description</div>
</div>
</div>
<div>
<div class="auto-complete-box">
<i class="fa fa-bars"></i>
</div>
<div class="auto-complete-tag">
<div class="tag-header">Header 2 </div>
<div class="tag-description">Item description</div>
</div>
</div>
Edit:
The divs are aligned and the icon also aligned to the div(s) on right side , probably by using stretch.
Use display:flex to wrap div and remove unnecessary code(inline/inline-block)
body {
background-color: #D2D5DD;
}
.wrap{
display:flex;
}
.tag-header {
text-transform: uppercase;
letter-spacing: 1px;
color: #0083cb;
}
.tag-description {
font-weight: 100;
font-size: 12px;
padding: 1px;
color: #798071;
margin-top: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrap">
<div class="auto-complete-box">
<i class="fa fa-bars"></i>
</div>
<div class="auto-complete-tag">
<div class="tag-header">HeaderValue</div>
<div class="tag-description">Item description</div>
</div>
</div>
<div class="wrap">
<div class="auto-complete-box">
<i class="fa fa-bars"></i>
</div>
<div class="auto-complete-tag">
<div class="tag-header">Header 2 </div>
<div class="tag-description">Item description</div>
</div>
</div>
Another simpler method to use when trying to align components in HTML is to make use of the table structure. Sometimes aligning of certain components don't work when using CSS because there might be a conflicting style element.
So a method I prefer using to ensure that my components are perfectly in line, is to encapsulate them in a table. In your case, put the icon and text element into 2 separate columns within a single row as shown in the code snippet below:
I hope this helps! :)
body {
background-color: #D2D5DD;
}
.auto-complete-box {
display: inline;
margin-top: -20px;
}
.auto-complete-tag {
margin-top: 15px;
margin-left: 5px;
display: inline-block;
}
.tag-header {
text-transform: uppercase;
letter-spacing: 1px;
color: #0083cb;
}
.tag-description {
font-weight: 100;
font-size: 12px;
padding: 1px;
color: #798071;
margin-top: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<table>
<tr>
<td>
<div>
<div class="auto-complete-box">
<i class="fa fa-bars"></i>
</div></div>
</td>
<td>
<div class="auto-complete-tag">
<div class="tag-header">HeaderValue</div>
<div class="tag-description">Item description</div>
</div>
</td>
<tr>
<td>
<div>
<div class="auto-complete-box">
<i class="fa fa-bars"></i>
</div></div>
</td>
<td>
<div class="auto-complete-tag">
<div class="tag-header">Header 2 </div>
<div class="tag-description">Item description</div>
</div>
</td>
</tr>
</table>
Maybe this way:
.wrap{
display: flex;
align-items: center;
}
I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/
You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle
I'm creating a simple web page that will have three large buttons that should fill the entire page (ie, they span the width of the page, and should take up 33.3% of the height for each.) I have the width part working, but I am unsure how to get the heights part working. This is my code so far.
<html>
<link rel="stylesheet" href="./bootstrap.min.css"/>
<link rel="stylesheet" href="./bootstrap-theme.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif">
<div class="col-md-4">
<i class = "fa fa-search fa-3x"></i>  <h1>Catalogue Search</h1>
</div>
<div class="col-md-4">
<i class = "fa fa-sign-in fa-3x"></i>  <h1>Library Account Login</h1></button>
</div>
<div class="col-md-4">
<i class = "fa fa-map-marker fa-3x"></i>  <h1>Hours and Locations</h1></button>
</div>
</span>
</div>
</div>
</div>
</html>
The following fiddle link may solve your problem.
Codes are as follows:
HTML:
<div class="container-fluid">
<div class="row">
<button id="catalogSearch" class="btn btn-default">Catalogue Search </button>
</div>
<br/><br/>
<div class="row">
<button type="button" id = "AccountLogin" class="btn btn-default">Library Account Login</button>
</div>
<br/><br/>
<div class="row">
<button id ="hrsLocations" class="btn btn-default btn-lg"> Hours and Locations</button>
</div>
</div>
CSS:
.btn
{
width:100%;
padding: 12%;
}
JavsScript
document.getElementById("catalogSearch").onclick = function () {
location.href = "https://encore.mpl.on.ca/iii/mobile/homepage?lang=eng";
};
document.getElementById("AccountLogin").onclick = function () {
location.href = "https://encore.mpl.on.ca/iii/mobile/homepage/Sdologin?lang=eng&loginReason=doDefault";
};
document.getElementById("hrsLocations").onclick = function () {
location.href = "http://www.mpl.on.ca/hours.php";
};
You haven't specified whether you are using Bootstrap v3 or v4.
You should only be using .col-*-* as children of .row elements or any other elements with a default margin: 0 -15px (such as .form-groups).
You are using .col-*-4 when you don't want your element to be 1/3 of their parent width.
You're using 3 <h1> tags on the same page, which is a very big no-no SEO-wise.
Probably the easiest way to achieve what you want, using Bootstrap v3 (which is what I assume you're using), would be using a .btn-block combined with flexbox. Please also note I've made significant changes to markup (yours is invalid).
body {
margin: 0;
}
div.jumbotron {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
min-height: 100vh;
margin-bottom: 0;
}
.jumbotron > .btn-block {
display: flex;
flex-direction: column;
min-height: calc(100vh - 60px);
align-items: stretch;
}
.jumbotron > .btn-block > .btn {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#media (min-width: 768px) {
.jumbotron > .btn-block {
min-height: calc(100vh - 120px);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<div class="btn-group-vertical btn-group btn-block">
<i class = "fa fa-search fa-3x"></i><h1>Catalogue Search</h1>
<i class = "fa fa-sign-in fa-3x"></i><h1>Library Account Login</h1>
<i class = "fa fa-map-marker fa-3x"></i><h1>Hours and Locations</h1>
</div>
</div>
</div>
</div>
Don't forget to autoprefix
Try this without bootstrap :)
// this will call the button and design
.button {
background-color: gray;
color: #FFFFFF;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:10px
}
// this will assign sizes of the button you want
.btnbig {
width: 99%;
height: 500px;
}
//btnbig is the class of your button you want to modify
<div class="button btnbig">A big button</div>
is this clear now ? im sorry (Im newbie)
If I understand the question correctly then you can use CSS calc to set the height as a percentage of the page.
.btn-block {
display: block;
width: 100%;
height: calc(100vh/3);
}
I'm a begginer coder and i'm learning to use bootstrap grid. Although, i didn't quite understand how the container margins work.
I wrote this piece of coding for a website footer and tried using bootstrap grid, but i wanted the social icons to be about 20px to the right and i can't get it. Inspecting the element at google chrome i can see there is a margin right but i can't seem to customize it and make it smaller.
take a look - this is my footer's html code:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
Now, this is my CSS code:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
#include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
#include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
a i.fa:hover {
color: #57cdf7; !important;
}
I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.
Thanks!
I'm assuming that your question means you want the social icons to sit on the FAR right of the screen, not necessarily in the confines of the grid that Bootstrap sets.
You would be messing with the Bootstrap grid to re-define .container like you did, and there are issues that go along with that (as you saw).
The best bet is to create an entirely separate component that you can move to wherever you want, independent of the Bootstrap grid.
HTML
<div class="social-icons">
<ul>
<li>Social Icon</li>
<li>Another Icon</li>
</ul>
</div>
CSS
.social-icons {
position: fixed;
bottom: -10px;
right: -5px;
}
ul {
list-style: none;
}
.social-icons li {
display: inline;
padding-right: 30px;
padding-bottom: 20px;
width: 100px;
}
CodePen
This in particular glues the social icons to the bottom of the page regardless of scrolling. But it gives you an idea of what to do.
First, you are supposed to wrap the whole content inside the container. Container is pre set class in bootstrap to keep your content in the appropriate place with appropriate width on different size screens.
<div class="container">
<footer>
<div class="row">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-6">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
</div> <!--end container-->
Also, the cols should equal to 12. col-md-2 + col-md-4 + col-md-6 = col-md-12.
col-md-12 is the full width of the page.
Here is a good read for you: http://getbootstrap.com/css/
And, what you are seeing in the inspector "margin right by social icons" is padding or the width that is pre set on your container in the bootstrap css.
First, Use row and container Class Separately.
Second, Your cols should equal to 12 as described in bootstrap grid system.
Third, you can also use offsetting columns which increases the left margin. example is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script>
</head>
<footer>
<div class="container ">
<div class="row ">
<div class="col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class=" col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class=" col-md-3 col-md-offset-3">
<i class="fa fa-home fa-2x" aria-hidden="true" ></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</footer>
I am trying to align an ionicon icon and text to its side in a vertical way inside a button using Bootstrap 3.
I want the text to be vertically aligned to the center of the button with the icon also vertically aligned.
The default seems to align the icon and the text using their lowest points.
My HTML is:
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
My CSS is:
.main-header .navbar .dropdown-menu li a.sign-out {
color: #fff !important;
vertical-align: middle;
}
.ion-fw {
width: 1.28571429em;
text-align: center;
}
My CSS targets the pair OK as their colors are correct. I have tried padding and margins on .menu-label but that moves the text and icon.
How do I adjust the text to the middle of the icon's height? Thanks!
Example:
Change this
.ion-fw {
width: 1.28571429em;
text-align: center;
}
to this
.ion-fw {
width: 1.28571429em;
text-align: center;
vertical-align: middle;
}
vertical-align works on elements in the same container and so must be applied to the contents...not the parent element.
.ion-fw {
width: 1.28571429em;
text-align: center;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>
This works for me:
.ion-fw {
display: inline-block;
vertical-align: bottom;
height: 1.4em;
font-size: 1.1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span class="menu-label">Sign Out</span>
</a>
</div>