Bootstrap Button Text not sizing

Question

I'm using bootstrap and I have a couple social media buttons. I need them to be larger and I have made the social icon large enough, but I can't seem to get the text to likewise increase. Anyone have any ideas? HTML:

<a role="button" class="btn btn-primary btn-tw col-6 mx-1 my-1" 
href="https://twitter.com/alvanhumane?lang=en" target="_blank"><i class="fab 
fa-twitter-square fa-5x"></i> Twitter</a>
<a role="button" class="btn btn-primary btn-in col-6 mx-1 my-1" 
href="https://www.instagram.com/explore/locations/99236675/al-van-humane- 
society/" target="_blank"><i class="fab fa-instagram fa-5x"></i> 
Instagram</a>

and CSS:

a.btn-tw {
    background-color: #00acee;
    font-size: 5em;
}

a.btn-in {
    background-color: #3f729b;
    font-size: 5em;
}

https://stackoverflow.com/questions/17579469/customize-text-size-in-bootstrap-button — Nick B, Jun 05 '18 at 21:40

nalgenes · Accepted Answer · 2018-06-06T13:35:38.687

1

Try using !important. It will override anything that is loading in after it

a.btn-in {
    background-color: #3f729b;
    font-size: 5em !important;
}

You may also be loading in the bootstrap CSS stylesheet after your own custom one in the <head> part of your HTML document. Put the bootstrap link above your own one.

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

edited Jun 06 '18 at 13:35

answered Jun 05 '18 at 21:57

nalgenes

320
1
2
12

My CSS is being loaded after my bootstrap, but the !important fixed it. One thing of note is that there shouldnt be a semicolon between the 5em and !important. Thanks! – sylphaxiom Jun 06 '18 at 13:01

Bootstrap Button Text not sizing

1 Answers1