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>
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
I just started creating my first Bootstrap project. However, my CSS for my Bootstrap button does not work. It is not applied. I wonder why, because it worked in the past.
I just want to set my button to green. This is my button (I am talking about the blue one):
Here is my code:
button {
padding-top: 200px;
background-color: #388E3C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->
</div>
</div>
I use the padding to check if anything is applied. I appreciate every kind of help.
It's definitely an specificity problem,
You are targeting just button elements, which is less specific than a class, that's why you style isn't applying and is being overwritten by bootstrap's class.
Either add your own class to the button to apply your styles, or target the button + a bootstrap class.
I would advise against using !important, it is not really necessary
button.btn {
padding-top: 200px;
background-color: #388E3C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
<!-- This is the button! -->
</div>
</div>
you can solve it in multiple ways
Use button.btn {....} than button {....} this should take care of your issue.
Use a selector class for the button then assign the property(which is what I have done).
#cssBtn {
padding-top: 200px;
background-color: #388E3C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" id="cssBtn" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
<!-- This is the button! -->
</div>
</div>
Odds are that Boostrap's CSS file is overriding yours, ensure that you load your CSS file after the Boostrap one. You'd be best assigning a custom class to the button
<button id="customButton" type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
Then setting your CSS to
button#customButton {
padding-top: 200px;
background-color: #388E3C;
}
Works for me when i copy your exact html and css into an environment, i would say that it's because you already have a lot of classes attached to the button
class="btn btn-primary btn-lg btn-block"
you may need to edit some of these classes as they are probably taking priority over the button itself
the best way to know is to do
button {
padding-top: 200px!important;
background-color: #388E3C;
}
although important is not best practice but that will give you your answer
If green button is all you need then add btn btn-success instead of btn btn-primary
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" class="btn btn-success btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->
</div>
</div>
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.
There must be a way to display one form next to another in Bootstrap without having to manually set the CSS to display:inline-block.
I've created a fiddle here.
I've used the form-inline class but that doesnt seem to make much of a difference. Am I missing something?
Here is solution:
Add a class,"pull-left" with form-inline.
Hope this will help.
You could put two forms side by side using the grid system. For example:
<div class="container">
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
See a working example here on JS Fiddle
You should use input-group class, as shown here:innput-group
By applying col class in forms you will get the proper result.
<div class='container'>
<div class='row m-b-20 title'>
<div class='col-sm-6'>
<h1>Test page</h1>
</div>
<div class='col-sm-6 text-right'>
<form action='/error-logs' method='POST' class='input-group pull-left'>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</form>
<form action='/error-logs' method='POST' class='input-group pull-right'>
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
</div>
</div>
i-ve stumbled on this searching for an aswer for similar problem
i-ve solved it by doing this
<form action="cosprocess.php" method="post" style="float: left; padding: 1px;">
Bootstrap 3 was likely used when this question was originally asked. Sangrai's answer of using pull-left may have worked well in 3, but unfortunately it does not in Bootstrap 4 when there are too many form controls to fit onto a single line. The controls don't align well.
The following has worked well for me in Bootstrap 4. It may be risky, though, since the Bootstrap documentation says nothing about having an inline form within an inline form.
<div class="form-inline">
<form class="form-inline">
<!-- First set of form controls go here. -->
</form>
<form class="form-inline">
<!-- Second set of form controls go here. -->
</form>
</div>
FYI - The Bootstrap 4.6 documentation says that pull-left was removed because it was redundant to float-left.
Make the parent div come under a row and have 12 col length for all vw.
Use buttons after input field and put all of them in a single form with class in-line.
fiddle
`
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</span>
</div>
</form>`
I have a web form that is using the Bootstrap framework.
I would like to right align the "Save" & "Cancel" buttons when the form is displayed on a full size screen.
What is the proper way to do this using Bootstrap 3 css?
<div class="row">
<div class="col-md-9">
<input type="reset" value="Cancel" class="btn btn-default btn-danger" />
</div><div class="col-md-3">
<input type="submit" value="Save" class="btn btn-default btn-success" />
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
</div><div class="col-md-3">
<input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
</div>
</div>
You need to add the pull-right helper class.
Docs: http://getbootstrap.com/css/#helper-classes-floats
Let's try this:
<div class="row">
<div class="col-md-9">
<input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
</div><div class="col-md-3">
<input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
</div>
</div>
Just put pull-right in the class to make it right align. Note that if you want to re-order the button just put the right-most on the upper line.
Try using one of the helper classes of Bootstrap for floating of objects.
You can use .pull-left for float:left; or .pull-right for float:right;
This should align the buttons correctly on the right side and with the right paddings.
Source: Bootstrap Documentation
Try this:
<div class="modal-footer">
<button type="button" class="btn btn-danger">Cancel</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
Here is my bootstrap code
<div class="input-append" align="center">
<input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"
/>
<button type="submit" class="btn">Search</button>
<button class="btn btn-primary active"><i class="icon-white icon-plus"></i> plus</button>
<button class="btn btn-primary active"><i class="icon-white icon-bullhorn"></i> Goto</button>
</div>
And here is a jsfiddle
How give top-padding and how to give some space in between the buttons and move the plus and goto button to right side
add another div for those 2 buttons and give float:right
And for gap between them give margin
button{margin-right:6px}
DEMO UPDATED
if you want to float right you use the built in class "pull-right"
<div class="pull-right">...</div>
and for search more looking one will be
<form class="form-search">
<div class="input-append" >
<input type="text" class="span2 search-query input-large" placeholder="search posts,users..">
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
and for keeping distance you can use margin
margin:10px