So basically I've been trying to center align two buttons on my website, and literally none of the common methods worked. It doesn't move no matter what, and nothing else is overriding it. I may be missing something but this is such a headache.
My CSS button code:
.btn {
border-radius: 10px !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
.btn-primary {
background-color: #346cfc !important
}
.btn-secondary {
background-color: #346cfc !important;
}
My HTML code:
</nav>
<div class="heading">
<h1 class="display-5 title"></i>Ricky</h1>
<p class="subtitle">Ricky is a multi purpose bot with features like Music, Economy, Utility, and more!<br />Check out the docs or get started below.</p>
<a class="btn btn-primary btn-lg text-center"href="https://discord.com/oauth2/authorize?client_id=778817321640394762&scope=bot&permissions=2147483647" target="_blank" role="button">Invite</a>
<a class="btn btn-secondary btn-lg text-center"href="https://discord.gg/XXBpY2v6AU" target="_blank" role="button">Support Server</a>
<br /><br /><br /><br /><br /><br />
I did find something that worked, making the position relative worked. But it looks bad on mobile depending on what I set the top and left % as
.btn-primary {
position: relative;
top: 50%;
left: 50%;
background-color: #7289DA !important
}
Any better way to do this than just making it look bad on PC or mobile?
You should wrap your button to a div
<div class="wrapper">
<a class="btn btn-primary btn-lg text-center"href="https://discord.com/oauth2/authorize?client_id=778817321640394762&scope=bot&permissions=2147483647" target="_blank" role="button">Invite</a>
<a class="btn btn-secondary btn-lg text-center"href="https://discord.gg/XXBpY2v6AU" target="_blank" role="button">Support Server</a>
</div>
.wrapper {
display: "flex";
align-items: "center";
}
https://css-tricks.com/almanac/properties/a/align-items/
Related
I have a pretty familiar bootstrap modal with the submit button on the left of the close button in the footer. But I am disabling the submit button for a particular invalid form filling, but I am thinking of doing one of a few things - making the button appear enabled so that people can click it and the error will pop-up in a tooltip. Or, I will leave the button with its familiar disabled appearance but if someone clicks it, it will show them the tooltip. Either way I need the div to over the top of the submit button no matter the circumstance:
#clickable {
position: absolute;
width: 55px;
height: 25px;
background-color: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-footer">
<div id="clickable"></div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
(I just made it pink so I can see where it is landing). Currently this goes over the close button and not the submit button. Any ideas how to get it to fit snuggly over the submit button?
I'm not sure I got your point. If you just want to hide the button, you can use a pseudo element.
Why not using a pseudo-element?
Basically, you use position: relative inside your button to make it a new space reference. It will be use as a reference for the pseudo-element which is inside, and you strech it with top/bottom/left/right: 0, and that's it.
No need to add some DOM just for styling purpose.
.btn-submit:disabled {
position: relative;
}
.btn-submit:disabled::after {
background-color: pink;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
<div class="modal-footer">
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
If you want it to be the tooltip, you'll have to wrap both the tooltip and the button:
.tooltip-container {
display: inline-block;
position: relative;
}
.tooltip {
background-color: pink;
position: absolute;
left: 0;
top: 0;
width: 55px; //Note that fixing size is probably a bad idea.
height: 25px;
}
<div class="modal-footer">
<div class="tooltip-container">
<div class="tooltip">This is the tooltip.</div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
I have buttons which follow the following structure:
<button type="button" class="btn btn-dark btn-sm"(click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
They look like this:
I can change the height and width of the buttons and the inline icons will stay centered:
.btn.btn-dark.btn-sm {
height: 80px;
width: 200px;
}
But then when im making them smaller for mobile, all of the sudden, the inlined icons stop being centered after i fall below a certain width/height:
#media (max-width: 690px){
.btn.btn-dark.btn-sm {
width: 10px;
height: 20px;
}
}
Why do they stop being centered on small width/height? How would i fix it? I tried alligning them to the center etc, but didnt find a working solution yet.
It looks like the button may have some padding that interferes when too small. Try this snippet
.btn.btn-dark.btn-sm {
height: 20px;
width: 20px;
padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button type="button" class="btn btn-dark btn-sm" (click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
So i had a solution to do something like this:
the problem was that everytime i had a little bigger text my button increased, and it became really ugly since i have a section full of buttons that i want to preserve the same size.
So i think a good option would be to mantain the same size for the buttons? (if there is other option would like to know :)).
So i had this:
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br><span class="fontSize">Image</span>
</button>
</div>
how can i change my solution to have the same effect i want on the button, i mean with the image and text centered related to the image mantaining the size of the button? any help i appreciate :)
Thanks
Are you looking for something like this? (I know, it's ugly)
#test{
min-width: 5px;
max-width: 5px;
}
<button id="test">test</button>
Here you go with a solution https://jsfiddle.net/r3g31e11/1/
.btn {
width: 100px;
height: 30px;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">
Submit
</button>
<br/>
<br/>
<button class="btn btn-primary">
Testisnottoincreasebuttonwidth
</button>
Truncate the extra character use ellipse. Set height & width of the button.
.test {
width : 80px;
}
.test > span {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:40px;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small test"><span>Test</span></button>
<button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button>
</div>
I am unable to change the color the button.The class is "btn-default".
I can see only half button color when I hover the mouse onto it.
Here is my html code:
<div class="pageOne">
<div class="block text-center">
<h1 id="header_text1"> a Good Tree production </h1>
<h2 id="header_text2">We Review What We Watch</h2>
</div>
<div class="btnList">
<a class="btn btn-default" href = "#"> a Good Tree production</a>
<a class="btn btn-default" href = "#"> About Us</a>
<a class="btn btn-default" href = "#"> Contact Us</a>
<a class="btn btn-default" href = "#"> Works</a>
</div>
</div>
CSS:
#header_text2{
font-family: 'Jura', sans-serif;
color: white;
font-weight: 400;
}
.btn-default{
background-color: black !important;
color: #0D9E69;
font-family: 'Barrio', cursive;
border-radius: 0px;
font-size: 20px !important;
}
.pageOne{
background-image:url("./container2.jpg");
background-size:cover;
height:450px;
}
Here is my live output link:
https://jsfiddle.net/VijayVj7/6k8y8ehL/1/
Please could anyone help me out on this
just add
.btn-default:hover {
background: #333;
}
Your can change your background position to:
.btn-default:focus, .btn-default:hover {
background-color: #e0e0e0;
background-position: 0 -50px;
}
Or
.btn-default:focus, .btn-default:hover {
background: #e0e0e0;
}
Just add this line to your existing css background-image: none !important;
Check this working snippet--
.btn-default{
background-color: black !important;
color: #0D9E69;
font-family: 'Barrio', cursive;
border-radius: 0px;
font-size: 20px !important;
background-image: none !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="pageOne">
<div class="block text-center">
<h1 id="header_text1"> a Good Tree production </h1>
<h2 id="header_text2">We Review What We Watch</h2>
</div>
<div class="btnList">
<a class="btn btn-default" href = "#"> a Good Tree production</a>
<a class="btn btn-default" href = "#"> About Us</a>
<a class="btn btn-default" href = "#"> Contact Us</a>
<a class="btn btn-default" href = "#"> Works</a>
</div>
</div>
</body>
</html>
TRY THIS should work--
.btn-default{
background-color: black !important;
color: #0D9E69;
font-family: 'Barrio', cursive;
border-radius: 0px;
font-size: 20px !important;
background-image: none !important;
}
The only thing you need to do is:
background-image: none;
The solution of your problem is to add background-image:none !important;
inside btn-default in your css so it will look like this
.btn-default{
background-color: black !important;
color: #0D9E69;
font-family: 'Barrio', cursive;
border-radius: 0px;
font-size: 20px !important;
background-image: none !important;
}
Now the problem of modifying the btn-default is that it will remove the btn-default's design purpose. I suggest that you add your own class with background color black and use it instead of the btn-default to avoid general changes to boostrap. for example in your code, change the btn-default to my-btn-default from your html code and also into your css code so the code will look like this
.my-btn-default{
background-color: black !important;
color: #0D9E69;
font-family: 'Barrio', cursive;
border-radius: 0px;
font-size: 20px !important;
background-image:none !important;
}
and in html
<div class="btnList">
<a class="btn my-btn-default" href = "#"> a Good Tree production</a>
<a class="btn my-btn-default" href = "#"> About Us</a>
<a class="btn my-btn-default" href = "#"> Contact Us</a>
<a class="btn my-btn-default" href = "#"> Works</a>
</div>
in this way it will not break any from bootstrap.
Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?
Button group is placed in <td> and wrapped in <div class="btn-group">:
Looks okay, until you re-size it to <768px. Then you have:
How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.
P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.
You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xs and visible-xs to them you can hide and show vertical group on appropriate screen size.
<div class="btn-group hidden-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).
Wide screen:
Narrow screen:
See the JSFiddle.
I want to offer you a version with icons from FontAwesome.
With a minimum screen resolution text hide leaving only icons.
Sorry for my english.
<div class="btn-group">
<button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
<button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>
UPDATE by Vishal Kumar: add GLYPHICONS preview
Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/
Here's an alternative to #fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.
All you have to do is add btn-toolbar-responsive to the toolbar div's classes.
It's in scss for simplicity although you can convert it online easily. Here is the JS Bin:
demo
SCSS:
.btn-toolbar.btn-toolbar-responsive{
text-align: center;
margin: 0;
.btn-group{
float: none;
}
#media (max-width: 767px){
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group{
position: relative;
display: block;
vertical-align: middle;
margin: 0;
.btn {
display: block;
float: none;
max-width: 100%;
}
.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
.btn-group:not(:first-child):not(:last-child) {
.btn {
border-radius: 0;
}
}
.btn-group:first-child:not(:last-child) {
.btn:last-child, .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.btn-group:last-child:not(:first-child) {
.btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
}
Okay, so this worked in a test page I made:
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.
You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.
<div class='row'>
<div class='col-xs-12 col-sm-6'>Some additional details</div>
<div class='col-xs-6 col-sm-3'>Date</div>
<div class='col-xs-6 col-sm-3'>
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
</div>
</div>
then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.
In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td> in my browser tests:
http://www.bootply.com/117330
try to set min-width on <td>
<td style="min-width: 90px">
<div class="btn-group">
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-check"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-question"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-times"></i>
</button>
</div>
</td>
<div id="secondNav" class="btn-group" role="group">
<button class='btn btn-default'>View</button>
<button class='btn btn-default'>Delete</button>
</div>
You can accomplish this with some simple jQuery
<script>
$(window).resize(function() {
justifyBtnGroup('secondNav');
});
function justifyBtnGroup(id) {
var btnGroup = $('#' + id);
if($(window).width() > 768) {
btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
} else {
btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
}
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>
This help for me. It doesn't make the buttons vertical, but it doesn't compress them either
<div class="btn-group flex-wrap" data-toggle="buttons">
No, If you open page in small screen, bootstrap wrap you buttons.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
you can add the class (btn-group-xs,btn-group-sm) in the media < 720px
hope it will help you ;)