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
Related
Upgrading to Bootstrap 4, and I cannot find an answer for this issue anywhere. In order to get the Datetime Picker to work, I found this version for the .CSS and JavaScript files:
https://github.com/tempusdominus/bootstrap-4
This worked, my Datetime picker does what it should. However, if I then change the CSS file to use rem instead of px, the Datetime Picker's icon to the right is about half the height of what it should be. This is what the HTML looks like:
<div class="row">
<div class="col-4 offset-2">
<label for="date_started">Date Started:</label>
<div class="input-group date" id="datetimepicker_pos_date_start" style="width: 250px;">
<input name="date_started" id="date_started" type="text" class="form-control" />
<span class="input-group-addon">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</span>
</div> <!-- // input-group -->
<p class="help-block">Provide the date you started this position, if known.</p>
</div> <!-- // col-4 -->
</div> <!-- // row -->
Until I changed the site to start using rem instead of px for measurements in my CSS file, the code worked flawlessly with the correct JavaScript and so on. But what did happen is that the height of the button on the right is about half what it should be.
I realize that this code does not use the new replacement in Bootstrap 4 "input-group-append", but when I tried to change it, the whole thing stopped working. I cannot find any settings I can make to get the button to be the correct height to the right of the entryarea. If I leave it like this, it works, but the button is not the correct height.
And having made a bunch of changes to my CSS file for other parts of the site, I have no idea what may be affecting this. The whole CSS file is too long to post here, but the basics at the top are here:
html
{
/* required for fixed footer */
position: relative;
min-height: 100%;
font-size: 62.5%; /* = 10px */
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6rem; /* = 16px */
/* font-size: 16px; */
color: #000000;
background-color: #FFFFFF;
margin-top: 1.0rem; /* 10px; */
margin-left: .2rem; /* 2px; */
margin-right: .2rem; /* 2px; */
padding: .5rem; /* 5px; */
/* for fixed footer */
margin-bottom: 4.0rem; /* 40px; */
}
I am hoping someone has some experience with this, or a possible solution to it. I tried putting this into my CSS file, but it doesn't seem to have any effect at all:
.input-group-addon, input-group-text
{
height: 3.0rem !important;
font-size: 3.0rem !important;
}
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;
}
I'm pulling my hair out to try and find out why my hover background-color isn't working for my custom buttons. I'm using twitter Bootstrap v3.
Here is the css code:
.btn-slide1 {
padding: 20px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;
background-color:#5cb85c;
border-color:#4cae4c;
}
.btn-slide1:hover,.btn-slide1:focus,.btn-slide1:active {background-color: #9966cc !important;}
Here is the html:
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/slide1.jpg');"></div>
<div class="carousel-caption">
<h2>Turn your art into a masterpiece</h2><br>
<a class="btn btn-slide1" href="#">Learn More</a>
</div>
</div>
I've tried adding '.btn' to the css code, and that hasn't worked.
It's part of a carousel slider. Could this be the reason?
This is the page in question: index_test.html
What am I missing?
Thank you!
Your problem is here. There is a negative z-index property on the carousel items. In full-slider.css line 124.
.carousel, .item, .active {
height: 100%;
z-index: -10 !important;
}
Changing it to 0 or more will fix. What's happening is it's behind the element that you're actually hovering.. You can check out this link for more on z-index and different behaviours. https://stackoverflow.com/a/35330122/2971290
Remove the z-index in /css/full-slider.css line 124.
It will be fine then.
I had the same problem that my btn:hover didn't work.
I changed Bootstrap link (after that worked)
For example, I can use this
-webkit-border-radius: 30px
To give the HTML5 element, such as a button, a round corner instead of a normal angular corner
Can I do the same for navbar?
The below is awesome but I am just curious if I can give the round corners to a navbar. If not then it is ok it is not overwhelmingly important
<div data-role="navbar">
<ul>
<li> <a href="#" class="ui-btn-active" id=viewtherecent> Recent </a> </li>
<li> <a href="#" id=viewthefrequency> Frequent </a> </li>
</ul>
</div> <!-- /navbar -->
Im not sure if you mean the buttons in the navbar or the Navbar itself so i provided 2 demos.
Demo rounded buttons
http://jsfiddle.net/r10tjkuz/
CSS
.nav-border {
border-radius: 30px;
}
Demo rounded Navbar
http://jsfiddle.net/6y1294rv/
CSS
.nav-bordera {
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}
.nav-borderb {
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
Yes you can. Add a CSS class to your navbar and set border radius:
<div class="navbar" data-role="navbar"></div>
.navbar {
border-radius: 30px;
}
If you don't want to add a class you can use CSS attribute selectors (but I don't usually style things like this).
[data-role=navbar] {
border-radius: 30px;
}
Yeap or if vendor prefixes are THAT important to you -- as they appear to be:
[data-role=navbar] {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
if you're using bootstrap 4 then you can do it by adding this to your css :
.header-dark .navbar {
border-radius:25px;
}
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;
}