Design Prototyping in the Browser Page Layout Defining Content Areas

Erwan EL
Erwan EL
7,669 Points
Posted by Erwan EL
Erwan EL
7,669 Points

Overwritting bootstrap

Why Nick doesn't overwrite the bootstrap by adding id's and it's still working. In my case doing the same as him, it doesn't work and have to add id's to overwrite. I have to do this everytime i work with bootstrap to add a custom css. So why is it working in this course?

Erwan EL
Erwan EL
7,669 Points
Erwan EL
Erwan EL
7,669 Points

I did this to obtain the same result as Nick

<section class="row">
            <div id="profile" class="col-lg-4 profile-info">
                <img class="float-left" src="mini-Juan-rogné.jpg" alt="Photo Erwan">
                <h2>Erwan EL</h2>
                <p class="text-muted">Medellin, CO</p>
            </div>
            <div class="col-lg-5">
                <p>Hola, me llamo Erwan, Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam fugiat nobis necessitatibus?</p>
            </div>
            <div class="col-lg-3">
                <p><a class="btn btn-block btn-primary" href="#">Send Message</a></p>
            </div>
        </section>

#profile img {
    max-width: 6rem;
    max-height: 6rem;
    border-radius: 1rem;
    margin: -0.5rem 1rem 0 0;
}

Added an id to the div Calling id then img balise in the css

1 Answer

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

When you inspect the rows and columns within (col-lg-*), are they using flexbox attributes?

I wouldn't use ID's anywhere in your css, these should generally be assigned for things such as js logic. If you are using an ID then it's best to review your structure and revise a better approach.

Mister Moody
Mister Moody
40,365 Points

Kinda true, but...I like to use IDs for same-page navigation. There are better practices for sure.