Is there a quick, possible way to do a button unclickable? To be exact, its an tag, not a tag. Thanks!
<input type="submit" value="Blocked" class="btn btn-success" />
You just add the disabled Boolean attribute
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<input type="submit" value="Enabled" class="btn btn-success" />
<input type="submit" value="Disabled" class="btn btn-success" disabled />
Related
I have created an input file button and I want to set it to fullwidth (display:block).
I have hidden the input field but still don't see a difference. Here is my code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form method='POST' action='' enctype='mutlipart/form-data'>
<label for="uploadAvatar">
<p style="display:block" class="btn btn-secondary btn-sm mt-3">Upload new avatar</p>
<input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
</label>
</form>
You have not add the display style properties to the HTML, because by default all form elements in Bootstrap are display: block and width: 100%.
Besides, you can use native Bootstrap 4 class utilities, like:
d-block : to display block any element
btn-block : to display block a btn element or an element with the btn class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" style="border: 1px solid #000;">
</div>
</form>
<form method='POST' action='' enctype='mutlipart/form-data'>
<label for="uploadAvatar" class="d-block">
<p class="btn btn-secondary btn-block btn-sm mt-3">Upload new avatar</p>
<input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
</label>
</form>
You can set col-12 to the label.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form method='POST' action='' enctype='mutlipart/form-data'>
<label for="uploadAvatar" class="col-12">
<p style="display:block" class="btn btn-secondary btn-sm mt-3">Upload new avatar</p>
<input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
</label>
</form>
I need to give space between two text boxes how much I want. How can I achieve. Below is my code.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-primary" id="btnsubmit" name="btnsubmit" value="Change Password" />
<input type="button" class="btn btn-warning" id="btnCancel" name="btnCancel" value="Cancel" />
</div>
Just add
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-primary" id="btnsubmit" name="btnsubmit" value="Change Password" />
<input type="button" class="btn btn-warning" id="btnCancel" name="btnCancel" value="Cancel" />
</div>
Set margin-top property to set space between two text boxes.
Here is the js fiddle.
Add margin to get space between button. + selector used for adding margin to the button which was placed immediately after .btn.
.btn + .btn {
margin-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-primary" id="btnsubmit" name="btnsubmit" value="Change Password" />
<input type="button" class="btn btn-warning" id="btnCancel" name="btnCancel" value="Cancel" />
</div>
Just give margin-right inside input field.
Here is plunker hope it will help you.
I have two buttons, save button and delete button. I need to add onclick event to both of the button. The onclick event function for delete button is working but I don't know how to onclick event to my save button.
This is my code.
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<input class="btn btn-info" id="savebutton" type="submit" name="save" value="Update" >
<input class="btn btn-default" id="delete" type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure to delete?');">
</div>
What I want to do is when I click the save button, the record will be save into database and something alert box will display and if I click 'OK', it will go back to the previous page.
I don't know why it is not working for you or what exactly you are looking for but it should be the same way as you did for delete. Check the snippet :)
function update(){
//databases work to save
alert("saved");
//address to the page where to want to redirect
location.href = "www.yoursite.com";
}
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<input class="btn btn-info" id="savebutton" type="submit" name="save" value="Update" onclick="update();">
<input class="btn btn-default" id="delete" type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure to delete?');">
</div>
How to fix a button Close because when width of screen decreasing it slip under the save button. How to prevent this by bootstrap or css?
Link on Codepen because it does not happens in stack snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-md-offset-2 col-md-2">
<input type="submit" value="Save" class="btn btn-default" />
<input type="submit" value="Close" class="btn btn-default" />
</div>
</div>
Give the div that surrounds the buttons white-space: nowrap;
Link on Codepen because it does not happens in stack snippet.
This is possibly likely because your Codepen is using col-xs-2 and your code here is using col-md-2.
If you're actually struggling with col-xs, then:
Another option is to simply use a different col-* class to increase the width instead of xs:
<div class="col-md-offset-2 col-md-2">
<input type="submit" value="Save" class="btn btn-default" />
<input type="submit" value="Close" class="btn btn-default" />
</div>
I am using following code in my project:
<input class="btn btn-default btn-file" type="file" id="file" style="float:left; width: 250px" name='athletes_imageid' value="" />
However my default button still stays on top of bootstrap one. Any way of fixing that?
Just put class to <span> like,
<span class="btn btn-default btn-file">
<input type="file" id="file" style="float:left; width: 250px" name='athletes_imageid' value="" />
</span>