I am trying to add a space between these two buttons, So I used bootstraps modal-footer class and I believe the buttons were supposed to have space in between, but there is no spacing. My code is below:
< div className = "modal-footer">
<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button>
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button>
</div>
The white-spaces between your JSX tags are not kept once the JSX is compiled to javascript. If you want to keep them anyway, you can do this:
<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button>
{' '}
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button>
Put them inside 'btn-toolbar', not 'modal-footer'. The .modal-footer class is used to define the style for the footer of the modal. For .btn-toolbar class see more info on Bootstrap documentation.
Try this code:
<div className="btn-toolbar">
<button className="btn btn-primary pull-right" formNoValidate={true} type="submit">Submit</button>
<button className ="btn btn-primary pull-right" onClick={this.resetForm} type="reset">Reset</button>
</div>
Please note: I have used 'button' html tag NOT 'Button' of bootstrap. That's why I have changed the bsstyle to className. You can try on your bootstrap setup.
There are other css methods also using which you can provide space between buttons easiest one is to assign 'margin-right' to button.
To fix this I removed the "pull-right" and the spacing worked from bootstraps "modal-footer" class.
<div className= "modal-footer">
<Button bsStyle = "primary" formNoValidate={true} type="submit">Submit</Button>
<Button bsStyle = "default" onClick={this.resetForm} type="reset">Reset</Button>
</div>
Related
I am trying to display a partial view inside a button popover.
cshtml:
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom" id="popoverBtn"
data-content="#(await Html.PartialAsync("_ListBoxPartial"))">
Popover on bottom
Partial View:
<div class="row">
<div class="col-12">
<select name="test" style="width:100%;" id="selectMultiple" class="form-control custom-select" multiple>
<option>123</option>
<option>456</option>
<option>789</option>
</select>
</div>
</div>
But it displays like this:
Instead of using RenderPartialAsync, use PartialAsync
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom" id="popoverBtn"
data-content="#(await Html.PartialAsync("_ListBoxPartial"))">
Popover on bottom
</button>
If you are initializing your popover via javascript, the v4 documentation of bootrap states:
html (boolean property with a default of false): Insert HTML into
the popover. If false, jQuery's text method will be used to insert
content into the DOM. Use text if you're worried about XSS attacks.
I haven't tried it but there might also be a data attribute equivalent of data-html="true" if you are not using js to initialize the popover (it would seem odd if there is though).
I have the following code for Button
Example 1
<button type='submit' class = 'btn btn-success' name='submit'>Logout<i style='margin-left:10px;' class='fas fa-sign-out-alt' aria-hidden='true'></i></button>
Example 2
<div class='btn-group'>
<button type="submit" name="showNotBillableEntry" class="btn btn-primary" style='border-radius: 8px; '><i class='fa fa-eye' style='margin-right:10px;'></i>Not Billable Entries
</button>
</div>
But when i changes the class btn btn-primary to btn btn-outline-primary, button become grey not outline as in bootstrap reference explained. Earlier they were green in color due to class btn btn-primary.
I want to use this <button type="button" class="btn btn-outline-primary">Primary</button> but it is not working.
Referring bootstrap - https://getbootstrap.com/docs/4.0/components/buttons/
I need help in css becoz the bootstrap link says to use type='button' in place of type='submit' but i can't use that as this button contain some data to be submitted to php server.
I have also included links which are needed for use in bootstrap.
You can do it like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<button type="submit" class="btn btn-outline-primary" style="font-size:30px;">Primary</button>
You can modify this as per your need. This is directly from the bootstrap's stylesheet
.btn-outline-primary{color:#007bff;border-color:#007bff}
.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary.focus,
.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled{color:#007bff;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,.show>
.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>
.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
I am trying to change CSS property by element ID using vanilla JS?
I am trying to achieve the following effect:
After the first button is clicked on the bottom bottom, the first button on the top should change it's class from btn-dark to btn-warning.
The remaining buttons should follow this same pattern: #b2 clicked should result in #d2 being changed from btn-dark to btn-warning.
My current attempt:
<div class="row">
<button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-dark"
id="d{{number}}"
>
</button>
</div>
<div class="row">
<button (click)="onClick($event)"
*ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-secondary"
id="b{{number}}">{{number}}
</button>
</div>
Screenshot displaying the template
Use ngClass, e.g.:
<button [ngClass]="{'btn-dark': true}">...</button>
Try like this
it will changed one of them at a time
stackblitz demo link
I would like to add 3 spaces between two right align button. Is there any bootstrap solution for it without adding custom css?
I do this :
<div class="text-right">
<button class="btn-info btn">Log in</button>
<!-- Add 3 spaces between button -->
<button class="btn-info btn">Log Out </button>
</div>
Fiddle demo : http://jsfiddle.net/6816gq84/1/
You can add btn-toolbar class to the container div.
<div class="text-right btn-toolbar">
<button class="btn-info btn">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
Have a look here.
I do this rudimentary solution: How to add space between bootstrap buttons in same div?.
<div class="btn-group pull-right row">
<div class="col-md-3"><button class="btn btn-default" type="button">Clôturer</button></div>
<div class="col-md-1"></div>
<div class="col-md-3"><button class="btn btn-primary" type="button">Soumettre</button></div>
</div>
This also work fine for me:
<div style="display: flex ; justify-content: flex-end">
<button class="btn-info btn mr-3">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
I'm not sure any bootstrap solution already exists for what you want to do, but there are other way, depending what you mean by "custom css".
You can add a span balise for exemple and add an inline css defining the width to 3em (3 spaces). It's HTML/CSS but you don't modify the css of the button's class.
<div class="text-right">
<button class="btn-info btn">Log in</button>
<span style="width:3em;"> </span>
<button class="btn-info btn">Log Out </button>
</div>
Does Bootstrap support fixed width buttons? Currently if I have 2 buttons, "Save" and "Download", the button size changes based on content.
Also what is the right way of extending Bootstrap?
You can also use the .btn-block class on the button, so that it expands to the parent's width.
If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
To do this you can come up with a width you feel is ok for both buttons and then create a custom class with the width and add it to your buttons like so:
CSS
.custom {
width: 78px !important;
}
I can then use this class and add it to the buttons like so:
<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>
Demo: http://jsfiddle.net/yNsxU/
You can take that custom class you create and place it inside your own stylesheet, which you load after the bootstrap stylesheet. We do this because any changes you place inside the bootstrap stylesheet might get accidentally lost when you update the framework, we also want your changes to take precedence over the default values.
If you place your buttons inside a div with class "btn-group" the buttons inside will stretch to the same size as the largest button.
eg:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Bootstrap Button Groups
For your buttons, you can create another CSS selector for those special classes of buttons with a specified min-width and max-width. So if your button is
<button class="save_button">Save</button>
In your Bootstrap CSS file you can create something like
.save_button {
min-width: 80px;
max-width: 80px;
}
This way it should always stay 80px even if you have a responsive design.
As far as the right way of extending Bootstrap goes, Take a look at this thread:
Extending Bootstrap
With BS 4 and BS 5, you can also use the sizing, and apply w-100 so that the button can occupy the complete width of the parent container.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Using btn-block
</p>
<div class="container-fluid">
<div class="btn-group col" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>
<p>
Using w-100
</p>
<div class="container-fluid">
<div class="btn-group col" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary w-100">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>
btn-group-justified and btn-group only work for static content but not on dynamically created buttons, and fixed with of button in css is not practical as it stay on the same width even all content are short.
My solution:
put the same class to group of buttons then loop to all of them, get the width of the longest button and apply it to all
var bwidth=0
$("button.btnGroup").each(function(i,v){
if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);
Bootstrap 5+
Use grid columns to set the width and the margin end utility to set margin between them:
<div>
Here are two buttons:
<button class="btn btn-primary col-3 me-2">PressMe</button>
<button class="btn btn-primary col-3">PressMeToo</button>
</div>
Expanding #kravits88 answer:
This will stretch the buttons to fit whole width:
<div className="btn-group-justified">
<div className="btn-group">
<button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
<button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>
A block width button could easily become responsive button if the parent container is responsive. I think that using a combination of a fixed width and a more detailed selector path instead of !important because:
1) Its not a hack (setting min-width and max-width the same is however hacky)
2) Does not use the !important tag which is bad practice
3) Uses width so will be very readable and anyone who understands how cascading works in CSS will see whats going on (maybe leave a CSS comment for this?)
4) Combine your selectors that apply to your targeted node for increased accuracy
.parent_element .btn.btn-primary.save-button {
width: 80px;
}
Just came upon the same need and was not satified with defining fixed width.
So did it with jquery:
var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
$("#share_cancel").width (max);
$("#share_commit").width (max);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
<button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>
Best way to the solution of your problem is to use button block btn-block with desired column width.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<button class="btn btn-primary btn-block">Save</button>
</div>
<div class="col-md-12">
<button class="btn btn-success btn-block">Download</button>
</div>
Here I found a solution by comparing buttons in a button-group element. The simple solution is to get the one with the largest width and set the width to the other buttons. So they can have a equal width.
function EqualizeButtons(parentElementId) {
var longest = 0;
var element = $(parentElementId);
element.find(".btn:not(.button-controlled)").each(function () {
$(this).addClass('button-controlled');
var width = $(this).width();
if (longest < width) longest = width;
}).promise().done(function () {
$('.button-controlled').width(longest);
});
}
It worked like a charm.
This may be a silly solution, but I was looking for a solution to this problem and got lazy.
Anyway, using input class="btn..." ... instead of button and padding the value= attribute with spaces so that they are all the same width works pretty well.
eg :
<input type="submit" class="btn btn-primary" value=" Calculate "/>
<input type="reset" class="btn btn-primary"value=" Reset "/>
I haven't been using bootstrap all that long, and maybe there is a good reason not to use this approach, but thought I might as well share