i made two buttons and margin them to the right to appear on the right side of the page, but the buttons is stick together with no space between them, and i tried to margin 30px e.g. but they both margin together
<button type="button" class="btn btn-primary" style="float: right; margin-right: 30px;">Login</button>
<button type="button" class="btn btn-secondary" style="float: right; margin-left: 30px;">Register</button>
this is a picture of the two buttons i made
I guess you are using bootstrap. You can use these classes in bootstrap:
<button type="button" class="btn btn-primary float-right">Login</button>
<button type="button" class="btn btn-secondary float-right mr-3">Register</button>
use float-right class instead of inline style.
use mr-x class to give margin (x => 1,2,3,4,5)
Related
First of all hi and thanks for your time!
I have a problem that I can't solve with bootsrap, I'm trying to center 2 buttons inside a div, in this code the buttons are aligned left, how can I center them?
Here is my code:
<div class="align-self-center">
<button type="button" class="btn btn-outline-primary"> BTN1</button><button type="button" class="btn btn-success">BTN2</button>
</div>
Use text-center class provided by bootstrap to align your buttons.
<div class="text-center">
<button type="button" class="btn btn-outline-primary">BTN1</button>
<button type="button" class="btn btn-success">BTN2</button>
</div>
The text-center class is basically doing -
text-align:center;
P.S. Not sure what .align-self-center is doing here
Suggestion - I see that you are using bootstrap 4. You can also use the class "btn-group" if it meets your requirements.
Click here to go to bootstrap 4 docs
For example I've made my button
<div class="btn btn-default">
Active
</div>
and it looks like the following
However I would like to have my button like this
How can I enlarge the width of the bootstrap button regardless of text size?
You can try to use btn-sm, btn-xs and btn-lg classes like this:
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
}
JSFIDDLE DEMO
You can make use of Bootstrap .btn-group-justified css class. Or you can simply add:
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
width:50%; //Specify your width here
}
JSFIDDLE DEMO
bootstrap comes with clas btn-lg
http://getbootstrap.com/components/#btn-dropdowns-sizing
<div class="btn btn-default btn-block">
Active
</div>
but if you want to have the button of the width of your column / container add btn-block
<div class="btn btn-default btn-lg">
Active
</div>
However this will expand to 100% so make surt ethat you will wrap your button in certain amount of columns e.g. then you know its always stays 3 columns until xs screen
<div class="col-sm-3">
<div class="btn btn-default btn-block">
Active
</div>
</div>
You can add your own css property for button size as follows:
.btn {
min-width: 250px;
}
Default Bootstrap size classes
You can use btn-lg, btn-sm and btn-xs classes for manipulating with its size.
btn-block
Also, there is a class btn-block which will extend your button to the whole block. It is very convenient in combination with Bootstrap grid.
For example, this code will show a button with the width equal to half of screen for medium and large screens; and will show a full-width button for small screens:
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
<button class="btn btn-group">Click me!</button>
</div>
</div>
Check this JSFiddle out. Try to resize frame.
If it is not enough, you can easily create your custom class.
Use block level buttons, those that span the full width of a parent
You can achieve this by adding btn-block class your button element.
Documentation here
Just simply add to the class of the bootstrap code.
.login
{
width: 20%;
margin-top: 39.5%;
margin-left: 35%;
}
<button type="button" class="btn btn-outline-dark btn-lg login">Login</button>
you can also use the css property scale for this
<button type="button" class="btn btn-primary " style="scale:1.5">Active</button>
Or just build a Class
.scale15{
scale:1.5;
}
http://jsfiddle.net/dazzafact/aj1hcsty/1/
I have three buttons and I want them to be on the same line, take all the space and every button has to be the same size.
And as soon as the window is too small to show every button at at least 170px width, I want every button to have their own line and take 100% of it.
I remember seeing websites that have navigation bars which work somewhat like this..
This is what my code currently looks like:
<div class="modal-body">
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
</div>
The first part seems to work fine, but when the window gets too small, the buttons don't take 100% width on their line:
Is there a bootstrap way to achieve that? Or is a css hack necessary?
I would rewrite the HTML to look like this.
<div class="modal-body">
<div class="row">
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
</div>
</div>
You will need to add a media query to css
button{
width: 170px
}
#media (max-width: 540px){
button{
width: 100%;
}
}
For best results add a parent class to button
if you are using Bootstrap then you should be able to use the 'col' CSS selector
you should be able to apply a container (or row) class depending how much of the screen you want to fill, then apply 'col-md-4 col-sm-12' (depending on the breakpoint you want it to go 100%) to all the buttons you shouldn't write the CSS inline like the example above use the bootstrap classes...
link to the bootstrap documentation http://getbootstrap.com/
Please refer to the Bootstrap grid system documentation to understand more about Col settings on different sizes.
http://getbootstrap.com/css/#grid
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>
My code looks like this:
<div class="row">
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">1</a>
</div>
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">2</a>
</div>
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">3</a>
</div>
</div>
This gives me 3 buttons across which is what I want. What I would like to do is make the buttons taller. If at all possible I'd prefer not to specify heights in pixels so that it can scale to different screen sizes better. Could I perhaps specify the height as a ratio (of the width) or a percentage of screen height?
Thanks in advance.
The simple & best solution would be to add top and bottom padding.
.btn-block {
padding: 10% 0;
/* define values in pixels / Percentage or em. whatever suits
your requirements */
}
Use Bootstrap padding property p-. Documentation
<a class="btn btn-default btn-block p-3" href="#">1</a>
Actually, just use py-4 as an extra class on your button.
py-# adds padding on top and bottom at the same time, and you can choose how much by changing the number (I think the max is 4, but I might be wrong).
You can check all the options here (it works at least from Bootstrap 4 onwards).