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;
}
Related
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.
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 this simple layout:
<form>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press this button to do Action A">
</div>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press this">
</div>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press!">
</div>
</form>
I use this simple style so that the buttons are big and are have some space between them:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
}
The problem I have is that the buttons do not have the same size (since it seems that the size of the button is the same as the size of the text) and form a scale (i.e. big, short, shorter).
How can I make the buttons have the same size irrespective of the containing text?
Just add a width property to the button CSS.
For example:
.buttonStyle {
//...
width: 100px;
}
set a width attribute in your CSS
like so:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
width: 200px;
}
You have several options here. Setting a constant width may be one of them. You could also try display: block, which will make the buttons fill the entire width of their parent node.
Define some standard "width" for your buttons like,:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
width:300px;
}
I have created a fiddle too to refer: http://jsfiddle.net/aasthatuteja/vChFX/
Hope this helps!
I have a select item that I've applied the selectpicker function on from http://silviomoreto.github.io/bootstrap-select/
now I'm trying to align the input-group-addon with the select, which turned into a btn-group,
however the addon's height is never the same as the btn-group's height, I'm using twitter bootstrap 3.
Anyone who can advice me on how to do this, my code is:
<div class="input-group">
<span id="contact_servicecode" class="input-group-addon ng-binding">CONTACT_SERVICECODE</span>
<div class="btn-group bootstrap-select">
<button class="btn dropdown-toggle btn-custom" data-toggle="dropdown" type="button">
<div class="filter-option pull-left">1</div>
<div class="caret"></div>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
</div>
<select class="selectpicker mobile-device" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
Here is my jsbin for how I fixed it. jsbin
When you set the input-group sizes either 'input-group-lg' or 'input-group-sm' it will give you predefined sizes - most notably a height of 46px or 30px for the inputs respectively. However nothing happens if you accept the regular size. I think this is so you aren't surprised if you have settings for inputs outside of Bootstrap.
Here are example measurements for lg
.input-group-lg > .input-group-btn > .btn {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
Instead of tweaking lg after the fact, I created a class called 'input-group-reg' uses measurements that are a middle ground between the 'lg' and 'sm' given by bootstrap.
.input-group-reg > .form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the input */
.default-input-group-lg > form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the button */
.input-group-reg > .input-group-btn > .btn, .input-group-reg > .input-group-btn:last-child > .dropdown-toggle{
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
It sounds like you're running into a known issue with Bootstrap when it's compiled with some SASS compilers. See https://github.com/twbs/bootstrap-sass/issues/409.
If you're using bootstrap-sass, that's that's causing it. You have to set the SASS precision to 10 before compiling Bootstrap. How you set it depends on what your particular set up is (Gulp, Grunt, Laravel Elixir, etc.).
.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:**0px**;margin-left:0}
is on first line of select.min.css
setting margin-botton to 0 ->problem solved!
As #theptrk says, it seems an explicit height isn't being set for buttons in input groups when not using input-group-sm or input-group-lg. I was able to fix this by just adding this to my bootstrap overrides:
// Fix input-group button sizing issue
.input-group > .input-group-btn > .btn, .input-group-btn:last-child > .dropdown-toggle {
height: 34px;
}
I am learning html, css and twitter bootstrap as I go along.
<div id="button" style=" position:absolute;top:450px; left:350px;">
<p>
<a href="https://docs.google.com/forms/d/1Exo4u2iRpChj-
Wg9K5HxteMeoVE1uee0fQKBWiuYYiw/viewform?pli=1" class="btn btn-primary btn-
large">Search
</a>
</p>
</div>
I want to increase the size of the font of this button and hence make it bigger. Could someone help me with this please?
Thanks!
This has changed in Bootstrap 3.
Now it is .btn-lg, .btn-sm, or .btn-xs
https://getbootstrap.com/docs/3.4/css/
here are the sizes bootstrap offers right out of the box.
.btn-large
.btn-small
.btn-mini
read more about it here
it's under Button sizes
Edit:
or you could make your own:
.btn-xlarge {
padding: 18px 28px;
font-size: 22px; //change this to your desired size
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Source located here
This has changed again in Bootstrap 4.
Now there is only .btn-lg and .btn-sm
https://getbootstrap.com/docs/4.0/components/buttons/#sizes