Logo


The logo is an essential element of brand identification in any business. Using one of the free tools from the MDBootstrap environment - Logo Generator, we will create a simple logo that we will add to the navbar in our portfolio.

Of course, such a logo will not replace a fully professional logotype created by a designer, but it will certainly be enough to start.

Step 1 - create a logo

Go to the Logo generator page. Here you can see a few available options.

You can change the text:

You can change the font:

You can change the icon:

You can change the size, colors, shadows and roundings:

So after you play a bit with it, remove the text, choose the icons you like and adjust it according to your preferences.

Step 2 - take a screenshot

Take a screenshot of your logo by cutting it out along with a piece of background.

Step 3 - cut out the background

To cut out the background you can use the great free Photopea program right in your browser.

Just drag a screenshot of your logo into Photopea.

Then from the menu on the left, select the Magic Wand tool and click on the white background, which will be selected in this way.

Click the Delete button on the keyboard and the background will be deleted.

Then from the top menu click Image -> Trim, then select "Transparent" and make sure all sides are selected and click OK.

Then click File -> Export as and choose PNG format. The file will be saved on your computer.

Step 4 - compress your logo

Simple but important step - use Compressor tool (or any other similar tool) to make any of your images lighter.

Then move your logo to the img folder in your project.

Step 5 - add logo to the navbar

Add navbar-brand element to your navbar (as a first element of the list of the links inside of the codecollapsible wrapper) and specify the path to your logo.

Don't forget to specify the height of the logo. 20px should be fine.

        
            
  
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        
        [...]
  
          <!-- Collapsible wrapper -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

              <!-- Logo -->
              <a class="navbar-brand me-1" href="#"><img src="./img/logo.png"  height="20px" alt="Logo"
                loading="lazy" /></a>
                
              <li class="nav-item">
                <a class="nav-link text-dark" href="#!">Projects</a>
              </li>

              [...]
  
      
        
    



John Doe

About author

Michal Szymanski

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.