Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4/

...

/

Tips and Tricks

Tips and Tricks

Let's discuss a few of the tips and tricks for beginners while developing layouts.

We'll cover the following...

We’ll go over the top 10 useful things to know that we haven’t covered so far in the course.

Center a div with the CSS declaration of margin: 0 auto

To center any layout, for example, inside the <body> element, you can use the world-famous margin: 0 auto.

For example:

Press + to interact
<body>
    <div class="layoutWrapper">
        <!-- the rest of layout -->
    </div>
</body>

The CSS:

Press + to interact
.layoutWrapper{
  margin: 0 auto;
  width: 1000px;
}

The above code will center the <div> with the class of layoutWrapper inside the <div> element. It will also make the layoutWrapper div 1000 pixels wide.

Never override a framework CSS class directly

This tip has to do with CSS in frameworks, such as Bootstrap.

Press + to interact
@media(max-width:800px){
  .d-flex {
    display: block;
  }
}

The above code is wrong because it’s a confusing signal. It’s like switching colors on traffic lights so that green means stop and red means go.

The coder was signaling the property of display being set to flex, when in reality, they're setting it to block.

The solution for the above issue is simple.

Press + to interact
<divclass="d-flexd-blockM"> 
  ...
</div>

Of course, inside CSS, you can add this:

Press + to interact
@media(max-width:800px){
  .d-blockM {
    display: block;
  }
}

What you see above is a clean solution that will work even ...

Ask