I'm stuck working with this code on my company's site. I can't seem to figure out how to float the buttons with the code given.
<div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>
<div style="text-align:center;"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></div>
Current view. Links to imgur.
Any help would be greatly appreciated. Thanks so much
You can use float left or right for horizontal align and for centralize use margin and as in bootstrap use pull-left or `pull-right class for the same.
like:
<div class="text-center pull-left"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>
<div style="text-align:center;" class="pull-left"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></div>
try this
<div class="center">
<button id="btn1">Button1</button>
<button id="btn2">Button2</button>
</div>
css
#btn1, #btn2
{
width:20%;
float:left;
}
Related
I want to add the Back and Next buttons at the bottom of the screen with a fixed position. For my code, the button moves to the top/bottom of the screen if I change the screen size (I have attached the screenshot for both). Please check my code and help me solve this.
Code
<div id="text-area">
<p class="mb-4">
<strong>Textarea</strong>
</p>
<textarea></textarea>
<p class="d-flex justify-content-between">
<button class="btn btn-link button" id="back">
<i class="fa fa-long-arrow-alt-left me-3"></i>
Back
</button>
<button class="btn btn-link button" id="next">
Next
<i class="fa fa-long-arrow-alt-right ms-3"></i>
</button>
</p>
</div>
This solved my problem. Thanks all for your time. Happy coding.
<div class="d-flex flex-column flex-grow-1" id="text-area">
<div class="flex-grow-1">
<p class="mb-4">
<strong>Textarea</strong>
</p>
<textarea></textarea>
</div>
<p class="d-flex justify-content-between">
<button class="btn btn-link button" id="back">
<i class="fa fa-long-arrow-alt-left me-3"></i>
Back
</button>
<button class="btn btn-link button" id="next">
Next
<i class="fa fa-long-arrow-alt-right ms-3"></i>
</button>
</p>
</div>
I would like to place an icon between two buttons. The icon is larger than the buttons and I would like their centers to be on a line. This means that the icon is a bit above and below the buttons.
A simple way to do this is a button group. Unfortunately, the icon is rounded off and buttons in a button group have sharp edges to neighbours in the group and the icon is rescaled to the same size as the buttons:
So I tried to get rid of the button-group. Bootstrap has an align-middle class for vertical alignment. But I can't get this to work. It looks like this:
I browsed and found this: How to center an element horizontally and vertically?
The answer lists a variety of approaches. I would like to stick with bootstrap and avoid custom css as far as possible. But one of the options sounded really good to me: Using justify and align in a flexbox container. Bootstrap containers are flexboxes, so I wrapped my buttons in a container and added align-items: center; justify-content: center;. Same result as the align-middle picture above.
I tried a variety of other css combinations, without any success. The three approaches above seem the cleanest to me, so I presented them here.
A fiddle: https://jsfiddle.net/aq9Laaew/285443/
html (assuming that you have bootstrap and fontawesome):
<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using the bootstrap align-middle class -->
<div class="align-middle">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<span><i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i></span>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
Potential duplicates (this is a very common question):
Bootstrap vertical align The answer works on a grid of rows and cols. I prefer not to introduce a grid.
Vertically align elements using CSS No answer has been accepted and the hints are similar to the answer I included in the main text.
Not 100% sure on what you want but if you want to align the buttons, then you can also use bootstrap flexbox and bootstrap text color instead of additional styling: (Edited: align-self-center vs align-items-center)
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-start align-items-center">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-5x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
<br/>
<div class="d-flex justify-content-start">
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-4x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
I am building a login page with social buttons using Font Awesome icons. On larger devices the buttons are displayed horizontally next to each other, but as I resize my screen the right-most button will wrap underneath the other two buttons when they get too wide for the column. I would like for the buttons to stack vertically and expand to fill the space of the column instead of having a misplaced button underneath. I've tried a method using media queries but it's a bit hacky and I'm afraid it won't be easy to maintain, so I scratched that idea.
Here's what I have so far:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="row">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-default"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
Any suggestions on how to tackle this?
You have two options. In my opinion media queries would be the cleanest but here are the options:
1) Adding a media query and targeting a special class that you can add to just those buttons:
#media screen and (max-width: 768px){
.loginBtns {
width:100%;
display:block;
margin: 10px 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 col-xs-12">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
2) Duplicating the buttons and hiding one version on small screens while showing the other. I'm not a big fan of duplicating code so I wouldn't recommend this option but if you don't like media queries it could be an option.
.loginBtns2 {
width:100%;
margin: 5px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 hidden-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns2">Login</button>
</div>
<div class="row">
<button id="facebook" class="btn btn-default loginBtns2"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
</div>
<div class="row">
<button id="google" class="btn btn-default loginBtns2"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
Here is a working codepen with both options too:
https://codepen.io/egerrard/pen/woVEJW
not sure if this helpful. but try this..
<div class="container">
<div class="row text-center">
<div class="col-md-6">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
I am trying to vertical-align the text in a button with a font awesome icon. This is the code I tried:
<button class="btn btn-primary"><span style="padding-top: -50px;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;"></i></button>
Fiddle: http://jsfiddle.net/koh8jkyb/
line-height is also not working. What's the problem here?
just use vertical-align:middle with the icon
try this
<button class="btn btn-primary">
<span style="padding: 10px;display: block;float: left;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;float: right;"></i>
</button>
http://jsfiddle.net/koh8jkyb/4/
Try this:
CSS :
.center-content {
display:table-cell;
vertical-align:middle;
}
HTML:
<button class="btn btn-primary">
<span class="center-content">Sign in with</span>
<span class="center-content">
<i class="fa fa-linkedin-square" style="font-size:3em;"></i>
</span>
</button>
Use style="font-size:3em;vertical-align:middle;"
Check out the running code at http://jsfiddle.net/koh8jkyb/
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/