I'm having the hardest time trying to redefine the font-size of BootStrap's .dropdown-menu class.
The Firefox inspector says it's from .dropdown-menu (inherited from ul), so I tried ul.dropdown-menu, .dropdown-menu but with no luck.
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header"></div>
<div id="myMenu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>First list item</li>
<li id="my-messages" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel" role="menu">
<li>Dropdown list item</li>
...
Any advise? Thanks.
Bootstrap's Default Settings Bootstrap's global default font-size is 14px, with a line-height of 1.428.
If you are tied to v3, I would recommend changing that value to 1rem , and then setting html {font-size: 14px} as in the example above. This is the best way. Bootstrap 4 will magically size like v3 once you change this to 14px.
Bootstrap 4 Default Settings Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
Looks like you're using it in conjunction with a nav?
I was able to do this with the nav and a bit of CSS.
BOOTPLY
CSS:
.navbar-nav > li {
font-size: 20px;
}
.dropdown-menu {
font-size: 20px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With