I have two buttons,one of the button text is not in the center of the button.
.mail_download_csv_btn{
width: 100px !important;
font-size: 12px !important;
}
.margin_right_10{
margin-right:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-info height_30 width_110 mail_download_csv_btn">Download CSV</button>
<button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button>
The text Download CSV is not centered to the button.Any help would be great.
Thank You.
It is centered, just your buttons width is limited, and the text overflow on right side, change:
.mail_download_csv_btn{
width: 100px !important;
font-size: 12px !important;
}
to
.mail_download_csv_btn{
width: 125px !important;
font-size: 12px !important;
}
I were setted width to a 125px, if you wish to have buttons the same width, otherwise, just delete width tag, if you wish to be auto.
Example with larger width:
.mail_download_csv_btn{
width: 125px !important;
font-size: 12px !important;
}
.margin_right_10{
margin-right:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-info height_30 width_110 mail_download_csv_btn">Download CSV</button>
<button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button>
The text is not centered because you set an explicit width to your button that simply is too small for the text.
Remove width: 100px !important from your .mail_download_csv_btn and the text gets the space needed for being centered.
If you want all buttons to have the same size, you should not set an explicit width as you can't know how much space the widest button will take in different browsers.
Instead try something like setting all buttons to the width of the widest button.
Related
I have a button which should be places in right most corner, so I used CSS for that, in 100% zoom it works fine but when I give 75% zoom Out, it shows the button in middle, I tried giving position fixed / absolute / relative, but nothing worked.
Can someone help me please.
.btn-primary {
background: transparent;
border-color: #2980b9;
color: #2980b9;
margin-left: 653px;
position: relative;
}
<button class="btn btn-primary btn--rounded" id="AnchroTagForButton" name="submit" type="button" title="btn action">>>> Show Components<i class="btn-icon fa fa-arrow-right"></i></button>
Images while Zooming in and Out
100% ZOOM IN
67% ZOOM IN
Maybe you just need to set to fixed on it (unaffected by scrolling) since it is then out of the document flow. (might need margin-right but will leave that to you
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position
.btn-primary {
background: transparent;
border-color: #2980b9;
color: #2980b9;
position: fixed;
right: 0px;
}
<button class="btn btn-primary btn--rounded" id="AnchroTagForButton" name="submit" type="button" title="btn action">>>> Show Components<i class="btn-icon fa fa-arrow-right"></i></button>
I want to reduce default size of button but only the font size reduces. I want to reduce font size and button size in proportion.
I tried to reduce font button then the size was not in proportion to font.
Reference link: https://mdbootstrap.com/components/buttons/
Code:
HTML:
<div class="standings">
<div class="standingstitle">
<h4>Teams Standings</h4>
<button type="button" class="btn btn-danger">See all stats</button>
</div>
</div>
CSS:
.btn-danger{
font-size: 6px;
width: 25px;
height: 30px;
}
Screenshot: (default size of button):
After trying above code gave me:
You need to adjust the padding property in the default btn selector. Try this code.
.btn {
padding: .4rem 1.5rem;
}
Try to make your selector more specific to prevent your rules from being overwritten:
btn btn-sm btn-danger {
font-size: 6px;
width: 25px;
height: 30px;
}
How to set custom width of a bootstrap button.
My problem is that I don't know how to shrink width of button to like on the image (it's a submit button). Left part is input text. My problem is button is too wide. Here is the code:
<div class="col-xs-5 col-xs-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg input-forme" id="Text" placeholder="Text">
<span class="input-group-btn tipka">
<button type="submit" class="btn btn-group-small" id="form-submit">Submit</button>
</span>
</div>
</div>
You can change width and padding : https://jsfiddle.net/wz8ac5d4/
.btn {
width:0px;
padding:5px;
}
Also you can add a class to your btn, it is a better practice.
HTML:
<button type="submit" class="btn btn-group-small my-small-btn" id="form-submit">Submit</button>
CSS :
.my-small-btn {
width:0px;
padding:5px;
}
The classes that define the different sizes are:
.btn-lg
.btn-md
.btn-sm
.btn-xs
refer this link
http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
You can increase its size with this:
.btn {
width: 100%;
padding: 5px;
}
I used max-width with padding.
HTML
<button type="submit" class="btn custom-btn" id="form-submit">Submit</button>
CSS
.custom-btn {
max-width: 100%;
padding-left:25px;
padding-right:25px;
}
You can also just shortcut the padding.
.custom-btn {
max-width: 100%;
padding: 6px 25px;
}
Just adjust the 25px to whatever length you want to get the appropriate size.
Please note that 6px is the standard top and bottom padding for a medium bootstrap button. You will have to adjust accordingly for large and small buttons.
I have a group of buttons:
<div class="row">
<button type="button" class="btn btn-warning btn-lg clearButton" onclick="resetSignature();"> Reset </button>
<button type="button" class="btn btn-warning btn-lg skipButton" onclick="skipQuestion();">Skip Question</button>
<button type="button" class="btn btn-success btn-lg nextQuestionButton" onclick="goToNextQuestion();"> Next Question → </button>
</div>
(I am using bootstrap). And I have some css:
.nextQuestionButton, .skipButton {
float: right;
margin: 5px 5px 5px 5px;
width: auto;
font-size:16px;
}
.clearButton {
float: left;
margin: 5px 5px 5px 5px;
font-size: 16px;
width: auto;
}
#media screen and (max-width: 500px) {
.clearButton, .skipButton, .nextQuestionButton {
width: 100%;
float: none;
}
}
This generates output like so:
My problem is that I want the green button to be the farthest to the right on a wide screen, and the bottom button on a narrow screen. I tried re-ordering the buttons (among other things), but then it ruined the order on narrow screens. How can I get the green button to line up on the right of the yellow one?
EDIT: Here is a jsFiddle
See this fiddle
I've changed your HTML a little bit
<div class="row">
<button type="button" class="btn btn-warning btn-lg clearButton" onclick="resetSignature();">Reset</button>
<div class="pull-right">
<button type="button" class="btn btn-warning btn-lg skipButton" onclick="skipQuestion();">Skip Question</button>
<button type="button" class="btn btn-success btn-lg nextQuestionButton" onclick="goToNextQuestion();">Next Question →</button>
</div>
</div>
and your CSS as
.nextQuestionButton, .skipButton {
margin: 5px 5px 5px 5px;
width: auto;
font-size:16px;
}
.clearButton {
float: left;
margin: 5px 5px 5px 5px;
font-size: 16px;
width: auto;
}
#media screen and (max-width: 500px) {
.clearButton, .skipButton, .nextQuestionButton {
width: 100%;
float: none;
}
}
What I have done is that, i enclosed two of your buttons in a div which is floated right instead of the buttons. To float right the div, I used the bootstrap class pull-right.
UPDATE
See the updated fiddle
.green {
float:left;
}
#media screen and (max-width: 300px) {
.green {float:right;}
}
just float it in different collection when screen is small.
I am trying to achieve the effect as shown in below screenshot using Bootstrap 3.
As you can see, the search button is both:
1) inside the input
2) styled with a glyphicon so as to not appear like a "button".
How can I achieve a similar effect with Bootstrap 3? I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.
A wrapper div with position: relative; then positioning the submit button on top using position: absolute;. Like this:
http://jsfiddle.net/VtP5k/
HTML
<form>
<div id="search">
<input type="text" />
<button type="sutmit">Search</button>
</div>
</form>
CSS
#search {
position: relative;
width: 200px;
}
#search input {
width: 194px;
}
#search button {
position: absolute;
top: 0;
right: 0;
margin: 3px 0;
}
Try this.
In bootstrap you have to use button type submit instead of input type;
Both works fine! use button in bootstrap!
div {
padding: 15px;
background: #000;
}
.btn {
text-align: left !important;
font-size: 12px !important;
padding: 20px 12px !important;
width: 200px !important;
color: #888 !important;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div>
<button type="submit" class="btn btn-default">
awesomeness <span class="glyphicon glyphicon-search pull-right"></span>
</button>
<div>
Or see this fiddle
<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span>
</button>
The problem is because the button is adhering to the normal flow of html and thus appears below the first element. What you need to do is wrap both the input and search button in an div and then make the search button absolute positioning. Then you can ad some jQuery functionality on a click function to achieve an event is needs be.
<html>
<body>
<div>
<input type="text" value="test"/>
<span id="search" class="absolute">x</span>
</div>
<style>
.absolute {
position:absolute;
top:9px;
left:115px;
}
</style>
<script>
$(document).on('click','#search',function(){
//some functionality
}
</script>
</body>
</html>