Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout.

I could use a media query to solve this issue, however, I am curious if there is a better way to neatly arrange the 2 columns that are moved below.

Perhaps this image demonstrates the problem more clearly:

example

Here's an example of the code:

<div class="row">
                <div class="col-sm-2 quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
                    <p>
                      python
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'AWS-logo-2.jpg' %}" alt="aws_logo">
                    <p>
                      aws
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'selenium.png' %}" alt="selenium_logo">
                    <p>
                      selenium
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'Csharp_Logo.png' %}" alt="csharp_logo">
                    <p>
                      C#
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'django.png' %}" alt="django_logo">
                    <p>
                      django
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  quick_skills_col" id="box">
                  <div class = "quick_skill">
                    <img class="quick_skill_img" src="{% static 'docker.png' %}" alt="docker_logo">
                    <p>
                      docker
                    </p>
                  </div>
                </div>
              </div>
htmlcsscss-gridbootstrap-5

Answer №1

If you want to create a responsive layout with elements that reflow nicely, using Flexbox is the way to go. I've set up a demo where the content is placed within a resizable container for a visual demonstration of how the items adjust.

#resizingDemoArea {
  border: 2px dotted;
  padding: 10px;
  width: 450px;
  resize: both;
  overflow: auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

.row .flexible_col {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100px;
  height: 80px;
  background-color: #eee;
  border: 1px solid grey;
}

.row .flexible_col img {font-size:8px;}
<div id="resizingDemoArea">

<div class="row">
                <div class="col-sm-2 flexible_col" id="box0">
                  <div class = "flex_item">
                    <img class="flex_item_img" src="{% static 'example_image.png' %}" alt="example_image">
                    <p>
                      Example Item
                    </p>
                  </div>
                </div>
                <div class="col-sm-2  flexible_col" id="box1">
                  <div class = "flex_item">
                    <img class="flex_item_img" src="{% static 'another_image.jpg' %}" alt="another_image">
                    <p>
                      Another Item
                    </p>
                  </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

Image broken despite accurate file path in next.js and tailwind

https://i.stack.imgur.com/2ZqPa.png In my components folder, specifically in navbar.js, I have a path to the image folder <img className="block lg:hidden h-8 w-auto" src='../images/logo_injoy.png' alt="Logo" /> U ...

htmlnext.js

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Consider the following example where I only changed the CSS box-sizing property from content-box to border-box. The resulting output difference is significant. Give this code a try: .box1 { width: 300px; height: 100px; border: 1px solid blue; pa ...

htmlcss

Adding labels to a JavaScript chart can be done by using the appropriate methods

https://i.stack.imgur.com/uEgZg.png https://i.stack.imgur.com/y6Jg2.png Hey there! I recently created a chart using the Victory.js framework (check out image 1) and now I'm looking to incorporate labels similar to the ones shown in the second image ab ...

javascripthtmlcssreactjsvictory-charts

What is the most effective method for incorporating a floating section next to a Susy gallery?

Check out my latest progress on the codepen here The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Ess ...

htmlcsssasscompass-sasssusy

Divs that are 30% of their parent's width will not align vertically and will not fit in a parent div that is 100% width

I am attempting to vertically center the three child-divs <div class="section"> as 3 rows in one column within <div class="container_page_2">. When I refer to vertical alignment, I mean having an equal distance between the top of the page and ...

htmlcss

Using Selenium with Java to interact with elements on a webpage, I encountered an issue where I was unable to click

I utilize Selenium for purposes other than web testing; my main goal is to extract and modify text from a website. Specifically, I use it within an additional editor to manipulate content on Confluence. The text I extract often contains various formatting ...

javahtmlseleniumweb-testing

Tips for preventing line breaks within table cells

Looking at the image below, I need to display the Hallticket in a single line. The first one is retrieved directly from the database, while the second one is added dynamically using JavaScript. How can I show both sets of data in a single line? https://i. ...

javascriptphpjqueryhtmlcss

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

htmlcss

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

javascriptjquerycssjquery-animatescrolltop

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

Using only python, launch a local html file on localhost

Currently, I am executing a code on a remote server that periodically creates an "status" HTML file (similar to TensorBoard) and saves it in a directory on the server. To check the status, I download this HTML file whenever needed. However, if I could use ...

pythonhtmlserverxampplocalhost

Troubleshooting a malfunctioning PHP script that verifies user ranks

I wrote a PHP script to determine the user's rank and grant access to view specific content based on that rank. Unfortunately, the script is not functioning as intended. Regardless of the user's rank, the content is still displayed. Here is the ...

phphtmlmysql

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Differences in font sizes across various browsers on Mac devices

In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul. The problem arises when viewing the navig ...

htmlcssmacosfonts

Using CSS selectors in Framework7 Vue allows for precise targeting and styling

I am currently working on developing a Cordova/Phonegap application using vue.js and the Framework7. I have been able to utilize functions like "onClick" by using the "v-on:click="OnClick" attribute within an HTML element. It's worth noting that Frame ...

csscordovadomvue.jshtml-framework-7

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

javascripthtmljquerycssbootstrap-4

Easy steps for aligning text with shiny html

Looking at the code below, I was able to successfully align the bullet-point text in the popover when hovering over the information circle. However, I am still struggling to justify-align its header right above it, as seen in this image. When I remove the ...

htmlcssrshinypopover

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

I am currently working with Ionic v1 and AngularJS, utilizing ion tabs: <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Home Tab --> <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home"> <ion-nav ...

javascriptiosangularjshtmlionic-v1

Creating a connection between my .html and .ejs files: A step-by-step guide

I have successfully created a pair of HTML files - index.html & contact.html. Within these files, I have implemented a navigation bar that allows for seamless transition between them. Recently, I delved into the realm of retrieving APIs and crafted an app ...

javascripthtmlexpressejsnav

Is there a way to modify the video height so that it aligns with the dimensions of the

I'm currently trying to adjust the background video to fit the parent div, but I am facing issues with adjusting its height within the media query. Any suggestions on how I can resolve this problem? HTML <div class="hero"> <video ...

htmlcss