'Apply bootstrap.min.css to a specific nav

I am frustrated with different sytles which mess up my page.

I have a established page and I am adding a navigation bar with a sign-in button. However, the "nav" reads some styles from "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css". this css file contains really a lot of things which disturbed my existing page layout and styles. I was trying to locate what is only needed for the navigation bar but I cannot get it right without affecting my current page.

previous styles applied in head:

<head>
       <style>
      .block [for=s1]{
        width: 400px;
        display: block;
        margin:5px 0;
        }
      .block [for=s2]{
        width: 800px;
        display: block;
        margin:5px 0;
        }
      .center [for=s1]{
        text-align: center;
        }
      .center [for=s2]{
        text-align: center;
        }

        label[for=s1]{
        display: inline-block;
        width: 100px;
        text-align: right;
        }
        label[for=s2]{
        display: inline-block;
        width: 70px;
        text-align: left;
        }

        input,textarea [for=s1]{
        vertical-align: top;
        }
        input,textarea [for=s2]{
        vertical-align: left;
        }

        .page-header {
        //background-color: #5E5A80;
        background-color: #454545;
        margin-top: 0;
        //padding: 20px 20px 20px 40px;
        padding: 5px 5px 5px 5px;
        }

        .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
        color: #ffffff;
        font-size: 25pt;
        text-decoration: none;
        }

        input:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

        body{
            background-color: #F4F4F4;
        }
    </style>
</head>

navigation bar:

<nav id="navbar" class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand mb-0" href="#">Pizza</a>
                </div>
                {% if user is not none %}
                <div id="navbar-collapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        {% block nav_list %}{% endblock %}
                    </ul>
                    <form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
                        <span>Welcome, {{ user }}.&nbsp;&nbsp;</span>
                        <button id="logout" class="btn btn-default btn-sm">Log out</button>
                    </form>
                </div>
                {% endif %}
            </div>
        </nav>

in order to make navigation bar looks nice, a new css is added as:

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

this new css file really mess up the entire html page, and it conflicts with a lot of styles applied above previously. How to maintain the previous style unchanged while using this css file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Apply bootstrap.min.css to a specific nav

Sources

Related Questions