The display of my code change when I add bootstrap link?

Question

So I plan to make my login page responsive using bootstrap. But when I add bootstrap link in my code, the display of my HTML is affected for some reason. I wanna know why is that, and can you give me a tip how can I make my login page responsive? Here is the image if there is bootstrap link added:

Here is the image if there is no bootstrap link:

My code:

body {
    width: auto;
    margin:0;
    padding:0;


}

@font-face {
    font-family: "Gidole";
    src: url(CODE Light.otf);
}

h2 {
    text-align: center;

}

.container {
    width: 960px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

}


.row {
    width: 320px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); 
    color: #191919; 
    background-color: green;    
    box-shadow: 0 1px 1px #ABBEB5;
    font-family: "Gidole", sans-serif;
    padding: 10px 55px 40px;    
    border: 1px solid black;

}   


input[type=text],[type=password] {
    width: 97%;
    height: 22px;
    padding-left: 5px;
    margin-bottom: 20px;
    margin-top: 8px;
    color: #191919;
    font-family: "Gidole", sans-serif;
    margin-top:5px;


}

#login {
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    /* display: block; use for centering  */
    display: block;
    color: #000000;

}

#signup {
    color: #191919; 
    margin-top: 5px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    display: block

}

#forgotpass {
    color: #191919; 
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    display: block
}

<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <h2> User Login </h1>
        <div class="myForm1">
            <form action="p1.php" method="POST">
                <input type="text" name="username" placeholder="Username" /> <br/>  
                <input type="password" name="password" placeholder="Password" /> <br/>
                <input type="submit" name="submit" id="login"/>
            </form>

            <form action="register.php" method="POST">

                <p> <a href="register.php" name="register" id="signup"> Sign up </a> </p>
                <p> <a href="" name="register" id="forgotpass"> Forgot password? </a> </p>

            </form>
        </div>
    </div>
</div>

Answer 1

To further elaborate what @Andrei Gheorghiu answered, Kindly open up your console on your Google Chrome browser (right click then 'Inspect Element' or press Ctrl + Shift + I or F12)

You can see in the image that your class {container} from your [style.css] {width} property was override by Twitter Bootstrap [bootstrap.min.css] class {container} property (check your console).

CSS properties will change depending on the importing order of your css files. In this case, I import the css files in this order:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css" />

This means that the css properties will start off by [bootstrap.min.css] follow by [style.css] So if we reverse the order like this:

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

This will happen:

And this one....

Now the Twitter Bootstrap [bootstrap.min.css] class {container} property overrides your [style.css] class {container} property.

You can also see that there's a prefix here '@media'. You can learn more about using @media queries to make your login page responsive here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

But like @Andrei mention, you can start of your login page layout from Bootstrap's provided example and keep your styles to a minimum if possible. Hope this helps for you.

Answer 2

Twitter Bootstrap is a collection of css and js components ready to be used in your project.

You used some class names used by Bootstrap in your project. Without loading Bootstrap, the rules defined in the library for those classes do not apply, because you're not loading the library. When you load it, they apply.

Some of the classes used by you and which Bootstrap styles up are: container and row. You should take some time and look through their examples and also inspect the applied CSS rules to better understand what each does.

Also, when you decide to use Bootstrap, best practice (by far) is to start from their provided examples and try to keep modifications to a minimum, especially regarding layout.

Please note Bootstrap provides fixes and solutions for most common layout problems such as

• browser rendering differences
• responsiveness

---

But, again. Bootstrap is not a robot which analyzes and fixes your page. It's just a collection of CSS rules, @media queries (and sometimes small js snippets). If you plan on using it, you need to learn what each of those components does.

Pretending it works out of the box is like pretending a plane to fly itself. Some do, but it's still best you know how to steer, land and take-off, just in case the automatic systems fail.