Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes.

By squares, I mean that the colored areas should have equal width and height.

Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is based on Bootstrap.

<div class="container">
  <div class="row">
    <div class="col-4" style="background-color: lightgray"></div>
    <div class="col-4" style="background-color: lightgreen"></div>
    <div class="col-4" style="background-color: lightgray"></div>
    <div class="col-4" style="background-color: lightgreen"></div>
    <div class="col-4" style="background-color: lightgray"></div>
    <div class="col-4" style="background-color: lightgreen"></div>
  </div>
</div>

var divs = $(".row > div");
var width = divs.width();
divs.height(width)

Is there a way to achieve this layout with just CSS?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you're looking to achieve equal height and width for squares using pure CSS, this trick might just be what you need:

Check out a live example in this fiddle: https://jsfiddle.net/65mhv1cp/

To implement this technique, simply add a class called square to your square elements.

<div class="row">
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
</div>

The necessary CSS rules are as follows:

.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1 */
}

For further details on the working mechanism behind this approach, feel free to explore the provided link.

Answer №2

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        <style type="text/css">
            body {
             
            }
            .gray {
              background-color: lightgray;
            }
            .green {
              background-color: lightgreen;
            }
        </style>
        
        <script>
            function size(){
                
                var divs = document.getElementsByClassName('blockBox');
                var divsWidth = document.getElementsByClassName('blockBox')[0].offsetWidth;

                for (i = 0; i < divs.length; i++) {
                    divs[i].style.height= divsWidth+'px';
                }
                
            }
        </script>
    </head>
    <body onload="size();">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 gray blockBox">1</div>
            <div class="col-xs-4 green blockBox">2</div>
            <div class="col-xs-4 gray blockBox">3</div>
            <div class="col-xs-4 green blockBox">4</div>
            <div class="col-xs-4 gray blockBox">5</div>
            <div class="col-xs-4 green blockBox">6</div>
        </div>
    </div>
    </body>
</html>

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

Adjusting content alignment for mobile devices and centering on desktop screens

I am currently working on creating a responsive website and I have a specific layout in mind. I want to center some text and an image both vertically and horizontally within a div that has a minimum height, leaving plenty of blank space above and below the ...

htmlcsstwitter-bootstrapbootstrap-5

Conceal the Tab Bar in Stack Navigator Excluding the tabBarVisible Setting

I discovered some solutions using outdated versions of navigation, specifically involving the "tabBarVisible" option in Tab Navigator. However, this option is no longer available, so I am seeking guidance on how to hide the Tab Bar on specific screens with ...

javascriptreactjsreact-nativeexporeact-navigation

Struggling with JavaScript conditional statements

Currently, I am in the process of creating a login and registration panel using jQuery and PHP. Essentially, if there are any errors during registration, it sets certain form errors, redirects back to the registration page, the JavaScript identifies these ...

phpjavascriptjqueryhtml

Looking to Share Your Words on Tumblr?

When it comes to interacting with Tumblr, I have no issues using the GET method. However, as soon as I attempt to use the POST method for my Tumblr blog, an error is thrown: ({"meta":{"status":401,"msg":"Not Authorized"},"response":[]}); Below is the cod ...

javascriptjqueryajaxtumblr

Implementing a dialog box pop-up from a separate React file

My journey with React is just beginning, so forgive me if this question seems basic. I have a delete icon in one of my files, and when it's clicked, I want to display a confirmation dialog box. I found an example on the official Material-UI website: h ...

javascriptreactjs

Customizing Bootstrap SCSS Styles: Using SASS to Override Defaults

This is the content of my styles.scss file: // Custom variables and mixins @import "variables.scss"; @import "mixins.scss"; // Global CSS @import 'bootstrap/scss/bootstrap.scss'; @import "global.scss"; @import "nav.scss"; @import "resume-item.sc ...

twitter-bootstrapsassbootstrap-4

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...

javascriptcssflexboxcss-transforms

TypeScript and the Safety of Curried Functions

What is the safest way to type curried functions in typescript? Especially when working with the following example interface Prop { <T, K extends keyof T>(name: K, object: T): T[K]; <K>(name: K): <T>(object: T) => /* ?? */; ...

javascripttypescripttypescript-typingstype-inference

JavaScript Transformation of Date Format

var dt="29/05/2013"; //DD/MM/YYYY I am looking to change the format to yyyy/MM/dd; My current approach is: var newdate=dt.getFullYear()+"/"+dt.getMonth()+"/"+dt.getDate(); Is there a more straightforward way to convert it without using substring? No p ...

javascriptjquery

Is it possible to change the background color of a MUI theme in ReactJS by using Css

Currently, I am utilizing Material UI to create a theme that is functioning correctly. However, upon adding <CssBaseline/> to the App.js file, it unexpectedly changes the background color to white instead of the intended #1f262a specified in the inde ...

javascriptcssreactjsmaterial-ui

step-by-step guide to replacing an item in an array using javascript

I am working with some HTML codes : <p class="Chords">[A] [B] [C]</p> <p> Some Text Goes Here </p> <p class="Chords">[D] [E] [F]</p> <p> Some Text Goes Here </p> <p class="Chords">[G] ...

javascriptjquery

Is there a way to make a table stay at a specific width for screen sizes larger than 1000px, but then adjust its size accordingly as the window size decreases?

<table id="example" class="row-border compact" style="width:1000px; table-layout:fixed;"> The table is currently set to have a width of 1000px, but I would like it to be 90% of the screen width when the window size is less than 1000px. Is it possibl ...

htmlhtml-tabledatatable

The AngularJS error message states that there is an issue because the $resource function is

I am currently facing an issue with my controller, specifically the error message: TypeError: $resource is not a function This error is pointing to the line var Activities = $resource('/api/activities'); app.controller('AddActivityCtrl& ...

javascriptangularjsnode.jsexpress

Problems with the Chosen property of MenuItem within Material-UI

The MenuItem's "selected" property does not seem to be functioning correctly within the Select component. For reference, please visit https://codesandbox.io/s/9j8z661lny I have attempted to use comparison with the Id, and even tried using selected={t ...

javascriptreactjsmaterial-ui

Out of the blue, the CSS functionality in my React app completely ceased to

I've been developing this website using React and Material UI, and I chose to implement standard CSS for styling. However, after closing my code editor and reopening it, some parts of the CSS do not seem to be loading properly. I'm completely puz ...

cssreactjsmaterial-ui

Is it possible to implement the splice() method within a forEach loop in Vue for mutation

Hey there! I'm looking for a more efficient way to replace objects that match a specific index with my response data. Currently, I'm attempting to use the splice() method within a forEach() loop in Vue.js. However, it seems to only remove the obj ...

javascriptarraysvue.jsvuex

Is there a specific regex pattern available to identify CSS and JavaScript links within an HTML file?

Currently, I am using a straightforward gulp task to compress my CSS and JS files. The task appends a .min extension to the names of the compacted files. Now, I want to make changes in the HTML to direct to these new compressed files, like so: Replace thi ...

javascriptregexgulpminify

My Next.js application does not display an error message when the input field is not valid

I've recently developed a currency converter application. It functions properly when a number is provided as input. However, in cases where the user enters anything other than a number or leaves the input field empty, the app fails to respond. I aim t ...

javascriptreactjsnext.jserror-handling

The form within the dynamically loaded AJAX content is malfunctioning

My webpage is set up to load content from a separate file (content.php) into a div and refresh it every 5 seconds. In the content.php file, I have a form (basic HTML without javascript) that works fine when accessed directly at (example.com/content.php). ...

javascripthtmlajaxforms

Having trouble retrieving data through AJAX requests

My goal is to verify the existence of a user email on "blur()" using AJAX to send textbox data to PHP. Even though I can see the posted data in Firebug, I keep encountering an error: Undefined index: data. Despite numerous attempts, I have been unable to r ...

javascriptphpjquery