Ensuring content stays at the bottom of a square div in Bootstrap 4

I am currently developing a budgeting app and I am aiming to create a design with a series of tiles, similar to the one shown below. However, I've encountered an issue where the content I try to add to the tiles ends up sticking to the bottom.

Using bootstrap 4, I have managed to create some square divs and customize them to my preferences (shoutout to SO), but I can't seem to populate them with content. Any suggestions on how I can fix this issue?

(On a related/unrelated note, when I add m-2 to the divs, the rightmost div shifts down to the next row)

.squareBox:before{
   padding-top: 100%;
   /* makes expand to a square */
   content: '';
   width: 0;
   white-space: normal;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-4">
        <div class="row">
            <div class="col-sm-4 squareBox icon m-2">
              <div class="row">
                <div class="col-xs-6">
                  <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
                </div>
              </div>
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
          </div>
      </div>
      <div class="col-md-6 mt-4"></div>
    </div>
  </div>

Current design:

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

Desired design: https://i.sstatic.net/s57kd.png

htmlcssbootstrap-4

Answer №1

To achieve square boxes, consider implementing a unique method. Create a "dummy" div with a margin and nest the squareBox within the columns...

.dummy {
    margin-top: 100%;
}

.squareBox {
    background: #1A3967;
    color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 30px;
    right: 0;
}

Subsequently, add content to each box utilizing Bootstrap 4 flexbox utilities for positioning.

Check out the demo here:

Answer №2

Consider utilizing the flexbox method for this situation :)

.squareBox{
   /* adjusts to become a square */
   width: 200px;
   height: 200px;
   white-space: normal;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   max-width: 200px;
 }

.justify-start {
  align-self: flex-start !important;
}

.t-1 {
  font-size: 1.2rem;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="m-5 d-flex justify-content-center align-items-center">
  <div class="squareBox icon d-flex flex-column justify-content-between align-items-center m-2">
    <div class="d-flex align-self-start justify-content-between w-100 p-2">
      <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
      <p class="font-weight-bold text-muted">$XX.X</p>
    </div>
    <div class="d-flex justify-content-center align-items-center text-white text-center">
      <p class="font-weight-bold t-1">Netflix & Hulu With roommcomm</p>
    </div>
    <div class="d-flex align-self-start justify-content-around w-100 text-white">
      <p>Sorted</p>
      <p>3</p>
    </div>
  </div>
  <div class="squareBox icon d-flex flex-column justify-content-between align-items-center m-2">
    <div class="d-flex align-self-start justify-content-between w-100 p-2">
      <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
      <p class="font-weight-bold text-muted">$XX.X</p>
    </div>
    <div class="d-flex justify-content-center align-items-center text-white text-center">
      <p class="font-weight-bold t-1">End of The F****** World</p>
    </div>
    <div class="d-flex align-self-start justify-content-around w-100 text-white">
      <p>Sorted</p>
      <p>5</p>
    </div>
  </div>
</div>

Check out this live demo as well :)

Furthermore, I have adjusted the width and height of the squareBox class to ensure it has specific dimensions :)

Alternatively, you can implement the flex-wrap class on the parent container to handle overflow on smaller screens

Answer №3

To achieve the desired look, it's important to position the icon absolutely and adjust the top and left offsets accordingly.

If you are not using image icons, absolute positioning is crucial for creating 'icon'-like elements.

.squareBox:before {
  padding-top: 100%;
  /* creates a square shape */
  content: '';
  width: 0;
  white-space: normal;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

.icon {
  font-family: lato;
  background: #1A3967;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.icon .row {
  position: absolute;
  top: 5px;
  left: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6 mt-4">
      <div class="row">
        <div class="col-sm-4 squareBox icon m-2">
          <div class="row">
            <div class="col-xs-6">
              <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
            </div>
          </div>
        </div>
        <div class="col-sm-4 squareBox m-2">
          first square box.
        </div>
        <div class="col-sm-4 squareBox m-2">
          first square box.
        </div>
      </div>
    </div>
    <div class="col-md-6 mt-4"></div>
  </div>
</div>

Answer №4

Instead of relying on padding-top: 100%; to specify the size of a square box, it is recommended to use height and width properties.

.squareBox{
   width: 100px;
   height: 100px;
   padding: 5px;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-4">
        <div class="row">
            <div class="col-sm-4 squareBox icon m-2">
              <div class="row">
                <div class="col-xs-6">
                  <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
                </div>
              </div>
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
          </div>
      </div>
      <div class="col-md-6 mt-4"></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

When implementing auto-generated IDs in HTML forms, rely on randomly generated values for increased uniqueness

When developing a form with multiple complex controls built as Backbone views, one wants to ensure that the labels are correctly linked to the input elements. This is typically done using the "for" attribute. However, in cases where the same control needs ...

javascriptjqueryhtmlbackbone.js

Interactive JavaScript button that navigates me to a document without the need to click

I'm facing an issue with my small project. I've been learning javascript and managed to create a script that calculates the square of a number provided by the user. var checkIt = function(){ var theNumber = Number(prompt("Please enter a number ...

javascriptjqueryhtml

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

Disordered block elements

I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...

htmlcss

Is my website broken due to Internet Explorer?

The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...

htmlcssinternet-explorercross-browsergoogle-chrome-frame

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

javascriptcssvue.jsanimationvue-data

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...

javascripthtmljson

Video with a personalized play button overlay

I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the tex ...

htmlcssvideotext

Why is a <script> tag placed within a <noscript> tag?

Lately, I've been exploring various websites with unique designs and content by inspecting their source code. One site that caught my attention was Squarespace, which had blocks of <script> tags within a <noscript> tag: <!-- Page is at ...

javascripthtmlnoscript

Modify the static navigation menu to a dynamic menu in Wordpress

Currently, I am attempting to transform my static navigation menu into a dynamic WordPress navigation menu. This is the code that I currently have: <nav> <ul id="menu"> <?php $pages = array( 'in ...

phphtmlcsswordpress

What causes divs and spans to be null values when attempting to adjust them using programming techniques?

Although I have experience styling logic with Ruby and Java, I am relatively new to front end development and JavaScript. I am encountering an issue where divs and spans are either undefined or null when I try to access them using methods like getElementBy ...

javascripthtmlcss

Generate images in real-time based on model element properties

I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...

c#htmlimagebootstrap-4razor-pages

Inject AJAX response text into a specific div element

I am working on a PHP file that retrieves MySQL results using post information from an AJAX request. The PHP file is set to echo the information from the MySQL table. Now, I need help figuring out how to use JQuery to load this response text into a DIV e ...

phpjavascriptjqueryhtml

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

javascripthtmlcsscross-platformwindows-8

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...

javascripthtmlreactjsflaskreact-fullstack

socket.io, along with their supporting servers

Can socket.io function separately from being the webserver? I prefer to utilize an external webserver, but in order for it to function properly I require /socket.io/socket.io.js. Is there a method other than duplicating[1] this file? I want to avoid comp ...

javascripthtmlnode.jsnginxsocket.io

What is the best way to merge different Vue JS instances (each linked to different html divs) into one cohesive unit using Vue

Essentially, I have a scenario where I've created two HTML divs named vueapp1 and vueapp2. Both of these divs serve the same purpose of displaying information and are linked to their individual Vue instances for extracting JSON data and presenting it. ...

javascripthtmlvue.jsvue-component

Modifying input values in AngularJS/HTML

I'm encountering an issue with the ng-repeat function in AngularJS within my HTML code. The problem is that when I change the input with the ID 'add-price' in one cartproduct, it simultaneously changes in all other cartproducts as well. For ...

javascripthtmlangularjs

Formatting text to automatically continue onto the next line without requiring scrolling through long blocks of

I have a unique Angular project with a terminal interface that functions properly, maintaining a vertical scroll and automatically scrolling when new commands are entered. However, I am struggling to get the text within the horizontal divs to wrap to the ...

javascripthtmlcssangular