i am trying to add social media buttons on django template (html file), but bootstrap4 seems to be interfering with the social media icons

Question

i am trying to add social media buttons on django template (html file), but bootstrap4 seems to be interfering with the social media icons

1.2k Views Asked by n0obcoder At 28 April 2025 at 18:44

I am using bootstrap 4 to style my html pages. And i am using font awesome to add social media icons on the webpage too.

<!DOCTYPE html>
<html lang = 'en'>
<head>
    
    <meta charset = 'utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>
        Page Title
    </title>

    <style>
        body {background-color: lightcyan}
        
        .fa {
        padding: 20px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        }

        .fa:hover {
        opacity: 0.6;
        }

        .fa-linkedin {
        background: #007bb5;
        color: white;
        }

        .fa-youtube {
        background: #bb0000;
        color: white;
        }
        
    </style>
</head>

<body>
    
    <div class = 'container'>
        <div class = 'row'>
            <div class = 'col text-center'>
                <a href="#" class="fa fa-linkedin fa-fw"></a>
                <a href="#" class="fa fa-youtube"></a>
            </div>
        </div>
    </div>

</body>
</html>

But when i import the bootstrap4 library, the social media icons shape distorts.

<!DOCTYPE html>
<html lang = 'en'>
<head>
    
    <meta charset = 'utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>
        Action Page
    </title>

    <style>
        body {background-color: lightcyan}
        
        .fa {
        padding: 20px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        }

        .fa:hover {
        opacity: 0.6;
        }

        .fa-linkedin {
        background: #007bb5;
        color: white;
        }

        .fa-youtube {
        background: #bb0000;
        color: white;
        }
        
    </style>

</head>

<body>
    
    <div class = 'container'>
        <div class = 'row'>
            <div class = 'col text-center'>
                <a href="#" class="fa fa-linkedin fa-fw"></a>
                <a href="#" class="fa fa-youtube"></a>
            </div>
        </div>
    </div>

</body>
</html>

I dont understand what the problem here is. Can somebody please help me solving this problem... Thanks in advance ! :)

Original Q&A

There are 1 best solutions below

**AGrush** · Accepted Answer

If you use chrome inspect tools and play around with switching off css and changing the values for display or position etc.. You will see which rule is breaking it. I found changing these fixed it:

.fa-linkedin, .fa-youtube {
  display: inline;
}

(hint: in the dev tools it also tells you which css file is causing the changes, i think it was font-awesome here)

i am trying to add social media buttons on django template (html file), but bootstrap4 seems to be interfering with the social media icons

There are 1 best solutions below

Related Questions in HTML

Related Questions in DJANGO

Related Questions in PYTHON-3.X

Related Questions in BOOTSTRAP-4

Related Questions in FONTAWESOME-4.4.0

Trending Questions

Popular # Hahtags

Popular Questions