How can I make space between buttons in navbar? I usually do that with but it doesn't work now. Here's an JSfiddle of how it looks:
http://jsfiddle.net/W6hEa/
you may try margin-left
here is the code
.btn{
margin-left:10px;
}
here is the example:: FIDDLE
Copy & paste this to your style.css and assign it as class attribute:
.btn-margin-left {
margin-left: 2px;
}
.btn-margin-right {
margin-right: 2px;
}
Usage
Link
<button type="button" class="btn btn-default btn-sm btn-margin-left">Button</button>
You can define spacing inside the class in bootstrap 4.0x.
https://getbootstrap.com/docs/4.0/utilities/spacing/
So for example
<button type="button" class="btn btn-default ml-2>Button</button>
Related
I have a button and trying to give to style properties for it in the same html statement but not getting the correct output.
<button style="color:yellow" style="background-color:blue" type="button" onclick="alert('Hello world!')">Click Me!</button>
I want to give text color as yellow and background color as blue in this html code only without using any kind of css. How should I do it?
You need to keep all of your style properties in a single tag and separate them with semi-colons.
<button style="color:yellow; background-color:blue;" type="button" onclick="alert('Hello world!')">Click Me!</button>
You should use style only once. Use a semicolon between each properties.
<button style="color:yellow; background-color:blue;" type="button" onclick="alert('Hello world!')">Click Me!</button>
another way is to assign a class to it and enter the required values there
<button class="btn" type="button">Click Me</button>
then in its css file
.btn{
background-color:blue;
}
Try this one:
.BtnStyle
{
color:yellow;
background-color:blue;
font-size:30px;
}
<button class="BtnStyle" type="button" onclick="alert('Btn Class Style Sample!')">Please Click!</button>
I'm trying to use this addition to bootstrap buttons. which adds a nifty "label" for the icons at the beginning of the button. but the problem lies when it's a "btn-block" type.
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
here's the jsfiddle I figure it's the
left:-12px;
as the position but how would I determine what negative number it would be if it's block? ideas?
Give text-align:left to the button
<button type="button" class="btn btn-success btn-labeled btn-block btn-custom">
<span class="btn-label">here</span>
problem
</button>
<br/>
<button type="button" class="btn btn-success btn-labeled">
<span class="btn-label">no</span>
problem
</button>
CSS
.btn-custom { text-align: left;}
Fiddle Demo
I’m using button element in a bootstrap template.
I was wondering if it is the normal behavior in bootstrap :
When there is not enough space to show all the buttons on one line, or when the window is resized, some buttons are shown on a 2nd line and it’s ok like that but there is no margin-bottom.
I can add it :
.btn {
margin-bottom: 5px;
}
But i find it strange that it is not handled by bootstrap.
Maybe i’m doing something wrong ?
SOURCE : http://jsfiddle.net/Vinyl/zx9oefya/
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
In Bootstrap's buttons.less and button-groups.less there's nothing about margin-top or margin-bottom. Having a margin by default would likely conflict when combining it with other elements (e.g. a form)
I think the best solution might be adding all buttons inside a btn-toolbar and to style that combination:
.btn-toolbar .btn {
margin-bottom: 5px;
}
Just add the spacing class. m for margin and p for padding.
<button class="btn btn-success mr-2" type="submit">Add</button>
<button class="btn btn-danger mr-2" type="button">Delete</button>
so, here mr is margin-right. similarly, you can add do for other cases.
mb-5 = margin bottom ..just add that :) sorted :)
I think that it's the normal behavior ( not 100% sure ) because it's "cleaner" to add margin ourselves when we want it that having to remove the default margin when we don't want it, from my opinion...
http://getbootstrap.com/components/#btn-groups
There's no margin on bootstrap's buttons examples, only on the parent div class btn-group but it's coming from a different stylesheet ( docs.min.css ). So I think it's that way for devs to add their own custom margins.
See here:
Is there an easy way to add some margin between the twitter bootstrap btn-group-vertical buttons, and to make them all have rounded corners?
My first attempt was to just add some margin between them, using css, but then I saw that, except for the first and last one, none of them had rounded corners, so instead of "playing on", I hope there is a "decent" way to accomplish this...
I think this is the easiest way to do that.
CSS
.btn-group-vertical > button{
margin-bottom:10px;
border-radius:10px !important;
}
Working Demo
With Bootstrap 5.1 you can now use the gap utilities to achieve this:
https://getbootstrap.com/docs/5.1/utilities/spacing/#gap
<div class="btn-group-vertical gap-3">
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
</div>
I want btn in navbar (which appeared only toggled) get btn-info color.
I add a btn-info class,
btn's text color changed to white
and btn color was unchanged.
I used default bootstrap 3 css.
bootply - click mobile view
<a class="btn btn-info navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>
you need to use ( !important ) for your btn-info property value, because the (.btn-info)
is overridden by the (.navbar-toggle) class value, so the solution is to add this code to your custome.css file or any file that you use to override the main bootstrap.css file.
code:
.btn-info {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
hope this will help you.
Ahmed Na's Answer works well. Great idea.
I add a class btn-info-navbar.
.btn-info-navbar {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
and add btn-info-navbar.
<a class="btn btn-info btn-info-navbar navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>