Is it possible to make a .rows column (e.g col-sm-4) square shaped? I want each column to have equal width and height.
<div class="row">
<div class="col-sm-4">I'm squared</div>
<div class="col-sm-4">Me too</div>
<div class="col-sm-4">Yes, me as well</div>
</div>
Any tips or advice are appreciated!
Bootstrap does not have built-in column height functionality. The column layout grid utilizes flex (See reference).
To ensure columns have the same width and height, option 1 involves adding your own CSS with the same width unit used in Bootstrap.
For example:
html, body {
height: 100%; /* for testing, expand height to allow column height to work */
}
[class^="col-"] {
outline: 1px solid orange; /* for testing */
}
.row {
height: 100%; /* expand height to allow column height to work */
}
.row-sm-4 {
align-self: stretch;
height: 33.33333333%; /* using a similar value as the width, but in percentage */
}By using the same value for width in percentage, the result will be different on various screen sizes and may not always be a perfect square. Using pixels for the height property may not provide significant assistance.
Option 2 involves utilizing CSS grid.
For example:
.grid-column {
outline: 1px solid orange; /* for testing */
}
.container-grid {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.container-grid .grid-column {
aspect-ratio: 1;
width: 100%;
}Explore more about CSS grid on css tricks website. Find additional information about creating a CSS square grid.
I'm struggling to prevent my HTML element from pushing down my other elements. When I look at the header, you can see that the BitBay title is causing alignment issues with the search bar and the account button. Even after trying to use the text-alig ...
Is there a way to make the fixed header responsive to only one scroll bar in JQuery? Specifically, is it possible to have it respond solely to the div's scroll bar and not the browser's scroll bar? I attempted to remove the browser's scroll ...
By utilizing Bootstrap, I have successfully implemented a sidebar feature. Initially, only the Font Awesome icon is visible, but upon hovering, it smoothly slides to the left revealing more content. Challenge: Unfortunately, the sidebar lacks responsivene ...
I encountered a strange issue with the sticky top navigation bar on my website. You can view the problem by visiting this link to the fiddle code and I've included the relevant details below. There are three specific areas where the problem arises: ...
<header> <div> <h1>Smith's Portfolio</h1> <hr /> <!--<p>Under construction</p>--> <nav> <ul> <li><a class="active" href="#">Home</a></li> <l ...
My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...
I'm currently at a loss for solutions as I can't seem to pinpoint the reason behind this peculiar behavior. I'm using Orchard CMS 1.4 along with a customized superfish stylesheet. Interestingly, the behavior varies depending on how the site ...
Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...
Could the layout be rearranged for md+ devices to this configuration on xs, sm devices? <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5d5b4859691c07 ...
I have successfully implemented the Flexible Slide-to-top Accordion on my webpage. Initially, I struggled with the functionality to have only one accordion open at a time due to my limited knowledge of jQuery. However, after overcoming this challenge, I n ...
I attempted to organize the display of leap years and non-leap years from 1991 to 2100 into two separate tables, but unfortunately, I was unsuccessful. Could you kindly offer guidance on how to present this information in a table format or a grid system? ...
I'm currently dealing with an external system that generates outdated code, however, I do have access to css and javascript. The specific issue at hand involves working with a table that displays each item on a separate row, sometimes resulting in up ...
In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...
I am having trouble with switching between the cross and circle symbols in my Tic Tac Toe game. The code seems to be set up correctly, but it's not functioning as expected. Any suggestions on how to fix this? Here is the JavaScript code: varcode va ...
Is there a way to make a title in one column overlap the next column without relying on position:absolute in CSS? I want to maintain the width of the title to be as wide as the col-8 column in Bootstrap, while keeping it proportional for smaller screens. A ...
My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...
I am in search of a sprite generator to streamline my web development process. With so many options available, I am seeking recommendations for the best tool. Ideally, I want a generator that can produce both a sprite image and corresponding CSS files wi ...
As I was experimenting with my navbar, I encountered an issue when trying to add an image right before the username. This is not something I usually deal with as I focus more on server-side scripting than design aspects. The active class on the dropdown ...
While reviewing CSS code created by another department, I noticed an interesting media descriptor: @media (max-width:-1) { ...standard css stuff here } The value of max-width cannot be less than 0, so what could be the purpose of this? Perhaps it was ...
Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...