Creating Space in CSS between Two Widgets

Is there a way to align the managers tab under the checkers and stockers areas on this page? The current setup has the manager button overlapping with both of them. If anyone has any suggestions on how to address this issue, I'm all ears. Thank you!

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a0baa2baa5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">

      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 1</span>
            <h2 class="font-bold">14/15</h2>
          </div>
        </div>
      </div>
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 4</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 7</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 2</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 5</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 8</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 3</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 6</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
      <div class="widget style1 navy-bg">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-right">
            <span>Phase 6</span>
            <h2 class="font-bold">18/20</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2">

      <div class="widget navy-bg p-lg text-center">
        <i class="fa fa-columns fa-6x"></i>
        <h3 class="">Checkers</h3>
        <h2 class="font-bold no-margins">42/43</h2>
      </div>
      <div class="col-lg-24">
        <div class="widget style1 navy-bg">
          <div class="row">
            <div class="col-4">
              <i class="fa fa-leaf fa-5x"></i>
            </div>
            <div class="col-8 text-right">
              <span>Managers</span>
              <h2 class="font-bold">9</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="widget navy-bg p-lg text-center">

        <i class="fa fa-wrench fa-6x"></i>
        <h3 class="">Stockers</h3>
        <h2 class="font-bold no-margins">12</h2>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Would you like something similar to this? Please refrain from becoming frustrated if I am unable to grasp your concern. You can find the code pen here, using bootstrap4. 

<div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-2">

                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 1</span>
                                        <h2 class="font-bold">14/15</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 4</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 7</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 2</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 5</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 8</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 3</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 6</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="widget style1 navy-bg">
                                <div class="row">
                                    <div class="col-4">
                                        <i class="fa fa-square-o fa-5x"></i>
                                    </div>
                                    <div class="col-8 text-right">
                                        <span>Phase 6</span>
                                        <h2 class="font-bold">18/20</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                        
                            <div class="widget navy-bg p-lg text-center">
                                <i class="fa fa-columns fa-6x"></i>
                                <h3 class="col-13 text-right">Checkers</h3>
                                <h2 class="font-bold no-margins col-13 text-right">42/43</h2>
                            </div>
                            <div class="col-lg-24">
                                <div class="widget style1 navy-bg">
                                    <div class="row">
                                        <div class="col-4">
                                            <i class="fa fa-leaf fa-5x"></i>
                                        </div>
                                        <div class="col-8 text-right">
                                            <span>Managers</span>
                                            <h2 class="font-bold">9</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="widget navy-bg p-lg text-center">

Answer №2

I've optimized your code for better performance. By refining the sizing of your elements, I was able to simplify your HTML structure significantly.

The main issue arose from nesting larger col classes within smaller ones like col-8 and col-4 inside a col-2, which can lead to layout problems.

.col-2 {
  min-width: fit-content;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="container-fluid">
  <div class="widget style1 navy-bg text-center">
    <div class="row justify-content-center">
      <div class="col-2 col-md-2 col-lg-2">
        <i class="fa fa-square-o fa-5x"></i>
        <span>Phase 1</span>
        <h2 class="font-bold">14/15</h2>
      </div>
      <div class="col-2 col-md-2 col-lg-2">
        <i class="fa fa-square-o fa-5x"></i>
        <span>Phase 2</span>
        <h2 class="font-bold">18/20</h2>
      </div>
      <div class="col-2 col-md-2 col-lg-2">
        <i class="fa fa-square-o fa-5x"></i>
        <span>Phase 3</span>
        <h2 class="font-bold">18/20</h2>
      </div>
    </div>
  </div>
  // Continued styling...
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP mail function on Godaddy hosting sending emails to spam folder instead of inbox

Currently, I am encountering an issue with the PHP mail function while using shared hosting on GoDaddy. Initially, emails were landing in the inbox successfully, but now they are being marked as spam instead. Here is the code snippet in question: <?ph ...

phphtmlemail

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

I recently tried to center the navigation links on my website using Bootstrap. I followed the instructions on the w3schools documentation and also watched a YouTube video for additional guidance. Both resources suggested adding the justify-content-center c ...

htmltwitter-bootstrapbootstrap-5

Switching the color of the placeholder text on a credit card

Recently, I have integrated credit card payment options into this website. To access the checkout page, you may need to add an item to your shopping cart first. Below, you will find the section where users can enter their credit card details. As part of ...

htmlcsswordpresswoocommerceweb

Fixing the bug in the circle text animation

I followed the instructions in this tutorial and implemented the following code: Splitting(); * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } body { display: flex; justify-content: center; align-items: center; ...

csscss-transforms

Delivering static frontend JavaScript file using ExpressJS

Hey there, I'm running into a bit of trouble when trying to load the frontend JS file on my Express server. Here's how my file structure looks: https://i.sstatic.net/EHDSp.png Here's my Server Code - app.set("view engine", " ...

javascripthtmlnode.jsexpressejs

Header Logo centered at the top

I am using a Bootstrap 4 navbar where the nav-brand is centered on a computer window, but shifts to a dropdown when expanded on mobile. Is there a way to keep the brand fixed at the top and center? Here is my navbar code in HTML: <nav class="navba ...

htmlcssbootstrap-4

Troubleshoot: Inability to highlight a column and row in a table using ::after and ::before

To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code: /* CSS Cod ...

htmlcss

Having trouble generating an HTML table from JSON data using JavaScript

My attempt to generate a table with data from an external .JSON file using JavaScript is not working as expected. Everything worked fine when the data was hardcoded into the .JS file, but once I tried to fetch it externally using "fetch", the details do no ...

javascripthtmljsonhtml-table

The image overlay in the div remains fixed in a large screen size but does not stack when the screen size

Sorry for the not-so-great title, I'm still learning the terminology. I have a situation where a div is covering part of a background image when the screen is wide. However, on smaller screens, I want that div to move below the background image inste ...

htmlcssbootstrap-4

Custom PHP Search Form with Tailored Filter Options

Currently, I am dedicating my own time to learning the basics of HTML, PHP and SQL in order to enhance my skills for work purposes. As part of this learning journey, I have challenged myself to create a website based on a fictional Books company. I have s ...

phphtmlmysqlformssearch

firefox compatibility issues with jquery ajax

Trying to establish a connection with a URL and expecting a large object in response has proven to be challenging. The process appears to function smoothly until an error occurs during the return reply, triggering the .ajax.error() function. Unfortunately, ...

jqueryhtmlajaxfirefox

Focusing on a specific div element

I need help selecting the initial div block that contains the word "Target". <div class="box-content"> <div> <div>Target</div> <div>xxxx</div> <div>xxxx</div> <div>xxxx</div> ...

csscss-selectors

Ways to minimize the size of Nextjs Static HTML Export page on disk

While utilizing Nextjs Static HTML Export, I've noticed that each page (consisting solely of HTML code) is being generated with a file size of over 100kb on disk. Are there any methods available to decrease the page size on disk? ...

javascripthtmlnode.jsreactjsnext.js

Can a relative link with parameters but no path be used?

Can I omit the path from an href tag and begin with a question mark instead? For instance, if my website is https://example.com/mycgi, would it be acceptable to have a link like this: <a href="?foo=bar">bar</a>? I tested this on Fir ...

html

adaptive menu bar with collapsible submenus

I would like to create a right side inline navigation bar with dropdown functionality. When the screen size is small, I want to hide all the menus and display a button. Clicking on the button should reveal a vertical navigation bar. I am facing an issue i ...

htmlcss

Tips for preserving checkbox state?

I am currently working on a web application project for a clinic and laboratory, specifically focusing on sending tests. I have implemented the code below to select the test category first, followed by the test name related to that category. However, when ...

javascriptphphtmlajaxazure-web-app-service

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

What are some techniques for creating a responsive table in CSS that includes images?

After much searching, I am confident that using "Skeleton CSS" will help achieve my goal. The concept is simple, but implementation is proving to be difficult. I am trying to create a table with multiple images that will change width to 750px when display ...

htmlcss

Slight Misalignment of Elements

I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...

javascripthtmljquerycss

Validation that is discreet and does not rely on data-val attributes, instead focusing on the presence of the "required" class

Below is the code snippet for my current view: @using (Html.BeginForm()) { <div class="left-column"> @Html.LabelFor(m => m.Expression) @Html.TextAreaFor(m => m.Expression, new { @spellcheck = "false" }) @Html.Editor ...

jqueryhtmlrazorjquery-validateunobtrusive-validation