Creating a Bootstrap column that is the height of two rows

Trying to create a calculator and have achieved perfect alignment for most elements, but struggling to fit in one last button. I need this button to be the height of two rows, but adjusting its height directly causes issues with rows below.

https://i.sstatic.net/mIjjs.png

Here's the current code, seeking advice on how to tackle this challenge:

<div
  id="root"
  className="container d-flex flex-row justify-content-center align-items-center"
>
  <div id="main" className="container border">
    <div className="row">
      <button className="col btn btn-primary">TEST</button>
      <button className="col-3 btn btn-primary">TEST</button>
      <button className="col-3 btn btn-primary">TEST</button>
    </div>

    <div className="row row-cols-4">
      <button className="col btn btn-primary">TEST</button>
      <button className="col btn btn-primary">TEST</button>
      <button className="col btn btn-primary">TEST</button>
      <button className="col btn btn-primary">TEST</button>
    </div>

    <div className="row row-cols-4">
      <button className="col btn btn-primary">TEST</button>
      <button className="col btn btn-primary">TEST</button>
      <button className="col btn btn-primary">TEST</button>
      <button className="col btn btn-primary">TEST</button>
    </div>

    <div className="row row-cols-3">
      <button className="col-3 btn btn-primary">TEST</button>
      <button className="col-3 btn btn-primary">TEST</button>
      <button className="col-3 btn btn-primary">TEST</button>
    </div>

    <div className="row row-cols-2">
      <button className="col btn btn-primary">TEST</button>
      <button className="col-3 btn btn-primary">TEST</button>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

Typically, to achieve full height, you would utilize .h-100 class, although there may be instances where it does not produce the desired outcome. In my case, I have implemented bootstrap-4, and for this particular scenario, the calculator structure should adhere to the following format: https://i.sstatic.net/NYf50.png

Here's a breakdown - black boxes represent rows and white boxes represent columns.

You may not need to employ the .h-100 class if this configuration is also effective with bootstrap-5.

black boxes are rows and white are columns.
<div id='root' className='container d-flex flex-row justify-content-center align-items-center'>
    <div id='main' className='container border'>
        <div className='row'>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col-3 btn btn-primary'>TEST</button>
            <button className='col-3 btn btn-primary'>TEST</button>
        </div>

        <div className='row row-cols-4'>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col btn btn-primary'>TEST</button>
        </div>

        <div className='row row-cols-4'>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col btn btn-primary'>TEST</button>
            <button className='col btn btn-primary'>TEST</button>
        </div>

        <div class="row row-cols-2">
            <div class="col">
                <div className='row row-cols-3'>
                    <button className='col-3 btn btn-primary'>TEST</button>
                    <button className='col-3 btn btn-primary'>TEST</button>
                    <button className='col-3 btn btn-primary'>TEST</button>
                </div>

                <div className='row row-cols-2'>
                    <button className='col btn btn-primary'>TEST</button>
                    <button className='col-3 btn btn-primary'>TEST</button>
                </div>
            </div>

            <div class="col">
                <div className='row row-cols-1'>
                    <button className='col btn btn-primary'> = btn</button>
                </div>
            </div>
        </div>
    </div>

Hopefully, this breakdown is beneficial to you in structuring your calculator.

Answer №2

If you want to rearrange your rows and columns, consider using this structure instead:

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

<div id='root' class='container d-flex flex-row justify-content-center align-items-center'>
  <div id='main' class='container border'>
    <div class='row'>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col-3 btn btn-primary'>TEST</button>
      <button class='col-3 btn btn-primary'>TEST</button>
    </div>

    <div class='row row-cols-4'>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col btn btn-primary'>TEST</button>
    </div>

    <div class='row row-cols-4'>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col btn btn-primary'>TEST</button>
      <button class='col btn btn-primary'>TEST</button>
    </div>

    <div class='row row-cols-4'>
      <div class='col-9'>

        <div class='row row-cols-3'>
          <button class='col-4 btn btn-primary'>TEST</button>
          <button class='col-4 btn btn-primary'>TEST</button>
          <button class='col-4 btn btn-primary'>TEST</button>
        </div>

        <div class='row row-cols-3'>
          <button class='col-9 btn btn-primary'>TEST</button>
          <button class='col-3 btn btn-primary'>TEST</button>
        </div>

      </div>
      <div class='col-3'>
        <div class='row' style='height: 100%'>
          <button class='col-12 btn btn-primary'>TEST</button>
        </div>
      </div>
    </div>

  </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

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Currently, I am utilizing Selenium/python to automatically scroll down a social media platform and extract posts. At the moment, I am gathering all the text in one go after scrolling a set number of times (see code below), but my objective is to only gathe ...

javascriptpythoncssseleniumselenium-webdriver

CSS Problem with Image Overlapping

Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height. <style type="text/css"> ...

htmlcss

Aligning images of varying sizes

I have implemented a PHP script that automatically resizes images proportionally to fit within a given height and width. For example, if the original picture is 200x100px and the target box is 180x180px, the resized image will be 180x90px. Although this s ...

csshtmlimagecentering

Utilizing em units within CSS media queries is producing erratic outcomes on various browsers

My CSS media queries are set up in a progressive manner like the following: * { font-size: 14pt; } @media screen and (min-width:85em) { : : } @media screen and (min-width:110em) { : : } When I have two browsers open on the same screen, with identical siz ...

cssmedia-queriesfont-size

The art of combining CSS3 gradients with background images

I've created a function that changes the parent element's background gradient when a checkbox's status is toggled. Check out the Lorem link to see it in action! Click here to view. However, I've encountered an issue with applying this ...

jqueryhtmlcssgradient

Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

https://i.sstatic.net/EEC2U.png I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked m ...

jquerycss

Loading hover images in css through jQuery preloading

Is there a reliable method for preloading CSS hover images using jQuery that anyone knows of? My ideal scenario would involve adding a class (for example, "pre-load-hover") to any element needing preloading, and then implementing JavaScript in $(document) ...

jqueryhtmlcss

The external Jquery file is being successfully loaded, however, the Jquery functions are failing to execute

I'm having an issue with my HTML partial, main index.html, and external JQuery file. Even though the file is being loaded successfully (verified through an alert function), the JQuery functions are not executing as expected. Upon checking the resourc ...

jqueryhtmlcssangularjstwitter-bootstrap

The image in the row wrap container spills over slightly

Even though all the items within that container are wrapped properly as article, there is an issue with the right border of the image overflowing the container's article border. My temporary solution involves adding a mediaquery @1041px and a small a ...

htmlcssfigure

Ways to adjust the positioning of an image

Seeking assistance, I am currently working on building a portfolio using HTML while following a tutorial. I utilized undraw to insert an image but unfortunately, the image is fixed to the right-hand side: I would like to position the image below my icons, ...

javascripthtmlcss

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

javascripthtml

What is the best way to organize angularjs controllers and directives within one another?

When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...

javascripthtmlangularjs

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

phpjqueryhtmlajaxjson

The font size varies depending on the language being used

On a single web page, there are 3 different language words displayed: Language / 한국어 / ภาษาไทย I am interested in enlarging the Thai word (ภาษาไทย) to make it stand out. <span class="thai">ภาษาไท ...

javascriptjquerycssunicode

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

What is the difference in behavior of v-for when using numbers versus template literals? Consider the following scenario: new Vue({ el: "#app", }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div i ...

javascripthtmlvue.jstemplate-literals

What is the best way to get rid of a connect-flash notification?

I'm having trouble removing the message (with the username displayed) after logging out by pressing the logout button. Every time I try to press the logout button, it just refreshes the page without any action. I want to stay on the same page and not ...

javascripthtmlexpresslogout

Managing the layout with React Native Flexbox to evenly distribute items

Check out this React Native Demo I put together featuring Santa images being added and removed in a Flexbox. Bunch of Santas I noticed that when there are more than 3 Santas, the layout shifts to the left. I'm curious about how to keep the Santas ce ...

javascriptcssreactjsreact-nativeflexbox

Scrolling to an element is not possible when it has both position absolute and overflow-x hidden properties

My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...

javascriptcssangularjs

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

htmlcsstext-alignmenttext-align

Troubleshooting a JavaScript error: Script.js throwing 'Uncaught TypeError' at line 5

While working on a small project, I encountered a JavaScript error that reads: script.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') at script.js:5:18 Below is the HTML & JavaScript code snippet that triggered thi ...

javascripthtmlcss