Alignment of grid with absolute images in Bootstrap

Hello there! I am relatively new to the world of coding and also to this platform, so please forgive any mistakes I may make along the way. Recently, I've been working on a project to create a site similar to Picrew, but I seem to have hit a roadblock. My goal is to align the character image at the top, with the selection buttons for other options located at the bottom: view image

However, the current alignment of the elements seems quite off, to say the least. I suspect it has to do with the combination of relative and absolute positioning I've used, but it was the only method I found to stack images on top of each other (like placing eyes on the head).

<body>
        <div class="container">
            <div class="row">
              <div class="col">
                <div class="navbar">
                    (Navbar content here)
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="img-display position-relative">
                    (Image elements here)
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="options-menu">
                    (Options menu content here)
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="options">
                    (Buttons for different options here)
                </div>
              </div>
            </div>
          </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856K...<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f5e9f7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="script.js"></script>
    </body>
htmlcsslayoutalignmentbootstrap-5

Answer №1

Successfully managing a complex layout with elements positioned absolutely requires precision and skill. One effective technique to consider is utilizing display: grid (valuable resource here)!

When structuring your grid areas, think about them as if they were the features of a face (eyes, nose, mouth, etc.). You can set fixed dimensions for each area and adjust the alignment of content within them as needed. If certain body parts span multiple grid areas, you can leverage the grid-template-areas property creatively. Even while using position: absolute, it's possible to work within the confines of the grid areas.

Below is a demonstration I put together featuring a rather unremarkable face:

.container {
  padding: 2rem 0;
}

.head {
  border: 1px solid black;
  border-radius: 50%;
  display: grid;
  grid-template-areas:
    "left-eye right-eye"
    "nose nose"
    "mouth mouth";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  padding: 1rem;
  width: 100px;
  height: 100px;
}

/* Utilize display: flex; for vertical and horizontal
   centering of elements within the grid areas */
.body-part {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-eye {
  grid-area: left-eye;
}

.right-eye {
  grid-area: right-eye;
}

.nose {
  grid-area: nose;
}

.mouth {
  grid-area: mouth;
}
<div class="container">
  <div class="head">
    <div class="body-part left-eye">0</div>
    <div class="body-part right-eye">0</div>
    <div class="body-part nose">|</div>
    <div class="body-part mouth">______</div>
  </div>
</div>
<div class="container">
  Controls, etc. here
</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

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can you help me with compiling Twitter Bootstrap 3.0 on my Windows 8?

Can anyone guide me on compiling Twitter Bootstrap using Less on a Windows machine? I tried following a tutorial but ran into issues with installing lessc (it was not in the npm registry). Also, the tutorial was for BS2 and not 3.0 which made me skeptical ...

htmlcssnode.jstwitter-bootstrap

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

c#javascriptjqueryasp.nethtml

When the bootstrap 5 dropdown is activated, flex wrap functionality triggers vertical scrolling

Every time I click on the dropdown, it causes a vertical scroll instead of popping out like a regular dropdown. I want to maintain the horizontal scroll while fixing this issue. Any suggestions on how to solve this problem? Demo: https://jsfiddle.net/d3j ...

csstwitter-bootstrapflexboxbootstrap-5

Removing a data entry from a PHP-generated MySQL table

In the process of developing a system, I have encountered a need to display database records in an HTML table. The functionality for creating the HTML table and retrieving data is working as expected. However, I am facing an issue with adding a column cont ...

phphtmlhtml-table

Transforming the inputted URL into a clickable hyperlink

I have a text input field where any text entered is displayed below using angular.js. However, I am trying to convert any http URL entered into a clickable link. I found reference to the solution on this Stack Overflow page. Despite successfully converting ...

javascripthtmlangularjs

Button to save and unsave in IONIC 2

I am looking to implement a save and unsaved icon feature in my list. The idea is that when I click on the icon, it saves the item and changes the icon accordingly. If I click on it again, it should unsave the item and revert the icon back to its original ...

javascriptandroidhtmlangularjsionic2

Library or theme with CSS that does not require the use of HTML classes

While there are many popular CSS libraries like Bootstrap and Foundation, they all require adding specific classes to HTML tags for styling. However, I find it tedious to add individual classes like .form-control from Bootstrap to every input element on m ...

htmlcsstwitter-bootstrap

Insert an HTML element or Angular component dynamically when a specific function is called in an Angular application

Currently, I am working on a component that contains a button connected to a function in the .ts file. My goal is to have this function add an HTML element or make it visible when the button is clicked. Specifically, I would like a dynamic <div> elem ...

htmlangulartypescriptbuttonclick

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

javascriptcssreactjsmaterial-ui

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

What is the best way to dynamically duplicate the Bootstrap multi-select feature?

$(function() { $('#days').multiselect({ includeSelectAllOption: true }); $('#btnSelected').click(function() { var selected = $("#days option:selected"); var message = ""; selected.each(function() { message ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Troubleshooting a vertical overflow problem with Flexbox

Struggling to design a portfolio page for FreeCodeCamp using flexbox layout due to vertical overflow issues. Here is the HTML: <div class="flex-container flex-column top"> <header class="flex-container"> <h1 class="logo"><i clas ...

cssflexbox

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Checking the length of user input with JavaScript

To ensure that the user enters at least 4 letters in a text box and show an error if they don't, I need help with the following code. It is partially working but currently allows submission even after showing the error message. I want to prevent subm ...

javascripthtml

Unable to submit form within a while loop in PHP table

After making some changes to my form, I noticed that only the hidden input field is being submitted when I try to submit the form. It's strange because it was working perfectly fine before. while ($row = mysqli_fetch_array($gettimesheets)) { $dat ...

phphtml

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

htmlcss