I am having problems a bootstrap button to work. We are making a site that allows people to vote up or down on various items.
The vote-up button works, however the vote-down doesn't. When I hover over the vote-down button it doesn't
Here is the HTML.
<div class="content-left-sidebar-meta">
<div class="post-vote-header">
<a class="btn btn-default post-vote post-vote-up" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-up" title="Like">
<i class="fa fa-chevron-up"></i></a>
<div class="vote-count">0</div>
<a class="btn btn-default post-vote post-vote-down" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-down" title="Dislike">
<i class="fa fa-chevron-down"></i></a>
</div>
</div>
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 have a cshtml file that takes care of displaying two buttons below each other in the upper right corner of the screen. Bootstrap 3.3.4 is used.
Now I need to add text to the left of the first button and I managed to do so with the below code, but any vertical alignment is non-existent, as this image shows:
Preferably I'd have the invisible line on which "This is the text" as it were stands lowered to the bottom border of the first button. The second option is to have the text vertically centered relative to the first button, that would be fine as well. How can I accomplish this with bootstrap 3.3.4?
This is the code:
<div class="pull-right">
<button class="btn btn-default btn-xs" data-bind="click: $root.logout">
<i class="fa fa-power-off"></i>
<span data-bind="translate: 'button-logout'"></span>
</button>
<a class="btn btn-default btn-xs" href="#Url.Action("Index", "Relations", new {Area = "Administration"})">
<i class="fa fa-cog"></i>
<span data-bind="translate: 'button-administration'"></span>
</a>
</div>
<div class="pull-right">
<span>This is the text </span>
</div>
Thanks!
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 having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.
<div class="jumbotron">
<p>
<button type="button" class="btn btn-default pull-right">
<i class="fa fa-plus" title="Edit"></i> </button>
</p>
http://jsfiddle.net/py7vA/217/
How would I fix this?
Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.
<i class="fa fa-plus"></i>
You can do a couple different things one is what Ibrahim mentioned or:
<div class="jumbotron">
<p>
<i class="fa fa-plus btn btn-default pull-right" title="Edit"></i>
</p>
</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>