Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Currently, I am utilizing Bootstrap 4 and attempting to design a row of 12 icons that are responsive.

<div class="app-container">
<div class="row">

  <div class="col-md-1">
    <a class="" href="https://www.xxx.org.au">
      <img class="" src="/images/web-1.png" alt="">
    </a>
  </div>
  ... x 12

</div>
</div>

The "app-container" class has one style property:

.app-container {
  width:1050px;
}

When displayed on a wide screen, the icons remain in a single row.

However, as the window width decreases, I wish for the icons to gradually move into a second row, starting from the right end, one at a time.

Currently, they do not adjust responsively and appear to overflow outside of their container without adapting to the reduced width of the display.

Refer to the image below:

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

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

Simplest solution would be to leverage the pre-existing Bootstrap 4 classes.

Check out this link for more information

<div class="app-container">
    <div class="row">
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
       ... (more HTML code here)
   </div>
</div>

Live Demo available here

To maintain a clean layout, apply a min-width attribute on each col-1. Avoid using col-md-1 as they will stack prematurely at 992px instead of displaying "one at a time".

Answer №2

Here is a potential starting solution:

 .col-md-1 { display: inline-block }

Alternatively, you could consider this highly distinct approach:

 .col-md-1 { float:left }

Answer №3

Modify,

.app-wrapper { width:1200px; }

to

.app-wrapper { max-width:1200px; width:100%;}

Answer №4

To easily achieve the desired result, simply apply the .container class to your .app-container division. This will effectively organize your Bootstrap columns as shown in the example layout below:

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4</div>
    <div class="col-md-4"></div>
  </div>
</div>

We hope this straightforward solution proves beneficial for your project!

Answer №5

  1. Insert the div "container" right before the div "row" within the .app-container division.

Answer №6

  <style>
   .container-app{
       max-width : 1050px;
   }
   .b{
      display: inline-block;
      float : right;
      width : 120px;
      height : 120px;

   }
   .b img{
       width :90px;
       height : 90px;
   }
   </style>
   <div class="container-app">
    <div class="row">
       <div class="b">
          <a class="" href="https://www.yyy.org.au">
           <img class="" src="/images/web-2.png" alt="">
          </a>
       </div>
        ...x 7
    </div>
  </div>

Answer №7

Implementing Bootstrap Grid for the Final Solution

.container-app{max-width: 1050px;}
.col-md-1{border:1px solid #999;}

<div class="row">
<div class="container-app">
    <div class="col-md-1 col-sm-2 col-xs-3">1</div>
    <div class="col-md-1 col-sm-2 col-xs-3">2</div>
    <div class="col-md-1 col-sm-2 col-xs-3">3</div>
    <div class="col-md-1 col-sm-2 col-xs-3">4</div>
    <div class="col-md-1 col-sm-2 col-xs-3">5</div>
    <div class="col-md-1 col-sm-2 col-xs-3">6</div>
    <div class="col-md-1 col-sm-2 col-xs-3">7</di
    <div class="col-md-1 col-sm-2 col-xs-3">8</div>  
    <div class="col-md-1 col-sm-2 col-xs-3">9</div>
    <div class="col-md-1 col-sm-2 col-xs-3">10</div>    
    <div class="col-md-1 col-sm-2 col-xs-3">11</div>
    <div class="col-md-1 col-sm-2 col-xs-3">12</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

The image appears to be overlapping within the navigation bar

I'm having trouble understanding why the image is overlapping on this website. The image is enclosed in a link tag, and upon inspecting it, the link tag seems to be correctly positioned while the image appears slightly below. I can't seem to ide ...

htmlcssimagetwitter-bootstrap

How can I prevent an InnerText from being empty in an If statement with PHP?

I need assistance with skipping empty InnerText and assigning a default value in my code. Here is the code snippet: if (strip_tags($result[$c]->innertext) == '') { $c++; continue; } Below is the output: https://i.stack. ...

phphtmlsimple-html-dom

django problem with bootstrap modal

I'm having trouble with the Bootstrap 4 modal in my Django project. When I click the button, the fade effect covers the entire screen, but the modal doesn't appear. I'm currently using Django 1.9. Does anyone have any suggestions on what mi ...

htmlbootstrap-modalbootstrap-4

The function of jQuery .click() not triggering on elements within msDropDown

I'm having difficulty implementing jQuery on an Adobe Business Catalyst site. The HTML snippet below shows the structure: <div class="banner-main"> <div class="banner-top"> <section class="banner"> <div class="catProd ...

javascriptjqueryhtmlbusiness-catalystmsdropdown

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Newbie Inquiry Renewed: What is the best way to convert this into a functional hyperlink that maintains the data received from the ID tag?

I have no prior training etc. If you are not willing to help, please refrain from responding as I am simply trying to learn here. <a id="player-web-Link">View in Depth Stats</a> This code snippet loads the following image: https://i.stack.i ...

javascriptjqueryhtmljson

Step-by-step guide on eliminating the modal post-validation

Newbie in reactjs looking for help with modal validation issue. Goal: Press submit button inside modal, validate, then close the modal. Want to reuse modal for another row. Problem: I'm having trouble making the function work for a new row after ...

javascriptreactjsbootstrap-4react-bootstrap

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

After creating my next.js application using the command npx create-next-app, I realized that the styles from the imported .css files are rendering correctly on Client Side Render but not on Server Side Render. The Next.js documentation states that importe ...

javascriptcssnext.jsserver-side-rendering

Issues with HTML5 file uploads causing delays in iOS Safari mobile browsers

I developed a simple HTML5 file upload script using $.ajax(). I also attempted to use xhr, but encountered the same issue. The script successfully uploads an image to imgur.com and works flawlessly on desktop browsers as well as iOS Safari. However, in iOS ...

ajaxhtmlfile-uploadmobile-safari

`Is it challenging to convert JSON into HTML, leading to undefined results?`

I am currently attempting to extract YAHOO data by utilizing getJSON and YQL. Although the connection is successful, I can retrieve the data and log it in the console. However, I am facing difficulties when trying to display this data on the JSP page I am ...

javascripthtmljson

The Mobile Side Menu Is Not Scrollable

I've encountered an issue with the side menu on my website. While it works perfectly fine on PC, it refuses to scroll on mobile devices. I've tested it on both my iPhone 5 and iPad, but no luck. Additionally, the toggle button isn't function ...

javascriptjqueryhtmlcssnavbar

In PHP, special characters in HTML remain unchanged when entered into a text input field

I am currently using the PFBC (PHP form builder class (PFBC)) to generate a TextBox element on a page; However, when dealing with strings containing special characters, it does not properly convert them into normal characters: For example: $razao = "livi ...

phphtmlhtmlspecialchars

Having trouble updating the value in the toolbar?

Here is an example that I added below: When I click the add button, the value of the "newarray" variable is updated but not reflected. I am unsure how to resolve this issue. This function is used to add new objects: export class AppComponent { ne ...

htmlangulartypescript

Extracting Text from a Span Element Using XPath in Selenium

Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...

javacssseleniumxpath

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

I'm struggling with overlaying a div on top of a canvas while keeping the canvas visible. Currently, I can only get the div to cover the canvas and hide it. If anyone has an example to share, that would be greatly appreciated. var canvas = document ...

csshtmlcanvashtml5-canvas

Creating margin on a canvas with jsPDF is a simple task that can be accomplished

Hi there, I'm currently working on generating a PDF from HTML using jsPDF, but I've run into an issue with setting page margins. I would really appreciate any assistance on how to add margins to my pages using the canvas object. Below is the sou ...

jqueryhtmlpdfjspdf

Is there a way to convert basic less code into CSS using VS2012 and Web Essentials?

I'm encountering an issue with the following less code: .aa { > { li { color: red;} } } After running this in Visual Studio 2012 with the latest web essentials, I am getting a compiler error on line 2. Is this really correct? As f ...

cssvisual-studio-2012less

Acquiring HTML form information in ASP.NET controller

Currently, I have a view that includes an HTML login form and I am working on passing the form values to a controller via post. My goal is to display the user's username using the Content method once the form is submitted. However, I am facing an issu ...

c#htmlasp.netformsasp.net-core-mvc

Guide to animate the appearance of a div from a specific location

I have a div that smoothly slides out when a label is hovered over. HTML: <div class="cellDataViewTdmStatus divCell userSitesCol7"> <label class="lblViewTdmStatus">View Status</label> </div> <div id="tdmStatus" class="hid ...

jquerycsshtmlcss-position

By employing the pseudo selector ::after, one can enhance the design

Trying to align 2 images next to each other, I am floating one left and the other right with the intention of clearing the float using the ::after pseudo selector. The surrounding text is expected to flow in between the images. I often struggle with maki ...

htmlcss