There seems to be an issue with Bootstrap not condensing into two columns properly on mobile devices

I need help figuring out how to turn a row of 4 images into two columns on tablet and mobile devices. Currently, they are stacking in a single column instead of forming two columns.

Basically, I want the images to adjust and display in two columns when viewed on screens smaller than desktop size.

Can someone point out what I might be doing incorrectly?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515617b657b65">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

UPDATE: The tablet displays two columns correctly, but mobile is showing a different layout: https://i.sstatic.net/m21j0.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Code has been updated to use col-6 (without a size modifier) and the img-fluid class has been added to the images for container scaling.

The code snippet functions as intended, with two columns displayed up to a window width of 992px.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6b64f5a4e4a544e4a5e44">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
</div>

Answer №2

By leveraging Bootstrap's Grid System, you have the flexibility to use col-6 to occupy 50% of the screen width on mobile devices and then switch to col-lg-3 to occupy 25% on desktop screens. Additionally, I have applied the img-fluid class to your image tags to ensure that they automatically adjust to fit the screen size.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067268766876">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
<div class="col-6 col-lg-3">
          <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
          <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
         <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
        <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </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

Difficulties encountered when trying to interact with buttons using JS and Bootstrap

I'm working with a Bootstrap 5 button in my project and I want to access it using JavaScript to disable it through the attribute. Here is the code I've been testing: Script in Header: ` <script> console.log(document.getElementsByName(& ...

javascripthtmlbootstrap-5

"Utilize jQuery to superimpose an image on top of

I'm attempting to create a feature where clicking on an image will reveal text underneath, similar to how retailmenot.com displays coupon codes. In addition, when the image is clicked, users should be directed to an external URL. Here is an example o ...

javascriptjqueryhtml

Deselect all child elements when the parent checkbox is not selected

Creating a page that features multiple checkboxes, some nested and others not. When a particular checkbox is selected, additional options will be displayed underneath it for selection; if unchecked, the child boxes will be hidden. Currently, this functiona ...

jqueryhtmlcss

Adjust the tabs to fit perfectly within the container

I am currently facing an issue with my navigation bar. I have placed the <nav> tags within a container set to 100% width. However, when I adjust the height of the container by a certain percentage, the <ul> & <li> elements in the nav ...

javascriptjqueryhtmlcsstabs

Tips for transitioning from custom CSS to Material UI's CSS in JS

I came across a project where someone implemented components with custom CSS. One interesting thing I noticed was a wrapper component, similar to Material UI's Container or just a simple div with applied styles. export const Container = styled.div` ...

javascriptcssreactjsmaterial-ui

enhancing the functionality of appended children by including a toggle class list

I'm having trouble toggling the classList on dynamically appended children. The toggle works fine on existing elements, but not on those added through user input. Any tips on how I can achieve this? I'm currently stumped and would appreciate any ...

javascripthtmlcss

EventListener fails to detect any changes in the dropdown menu

I am currently delving into the world of Django and JavaScript, but I am encountering an issue with the addEventListener function. It seems to be malfunctioning and I am at a loss. Can anyone provide insight into what may be causing this problem? Here is ...

javascripthtmldjango

Is the 'name' field empty in PHP contact form emails being sent to the email address?

Sorry, I'm new to filling out this type of form! I managed to create a contact form page that sends me the 'email address' and 'message' from the form fields, but it's not sending the value entered in the name field, it remai ...

phphtmlforms

Tips on targeting specific HTML content

Looking for assistance. I'm trying to extract HTML content from test.php <p> This is the content of a paragraph or article on a web page</p> <p>[albumname=Mount Climbing]</p> I want to process those [albumname] tags into thum ...

phphtml

What is the best way to make a dropdown button on a top navigation bar show as active using Semantic-ui?

I searched through the Semantic-ui documentation, but I couldn't find clear instructions on how to designate a dropdown item as 'active' (highlighted without being opened) in my top navbar menu, similar to regular items. The 'active&ap ...

csssemantic-ui

Multiple Ajax calls interacting with each other are causing issues

Within my Index.php file, there is an ajax call that loads a php page containing an HTML form. I am attempting to trigger another ajax call from Index.php whenever a select box is changed. Everything functions properly except for the ajax on change event ...

phpjqueryhtmlajax

"Designing with Vue.js for a seamless and adaptive user experience

I'm looking to customize the display of my data in Vuejs by arranging each property vertically. Instead of appearing on the same line, I want every item in conversationHistory to be displayed vertically. How can I achieve this in Vuejs? Can anyone off ...

cssvue.jsresponsive

The width of my root container does not display at a full 100% in mobile dimensions

After creating a simple React.js project, I set up the folder structure using `npx create-react-app`. Additionally, I added some styling with `* { margin: 0; padding: 0; box-sizing: border-box }`, and specified background colors for the body and #root elem ...

htmlcssreactjs

Syntax: Implement variable for css property value

Is there a way to center a box vertically within another box using jQuery instead of CSS? I believe it's more reliable. var textH = $(".Text").height(); var vertAlign = ((140 - textH)/2); $(".Text").css({ marginTop: 'vertAlign' }); I& ...

jquerycssmathvar

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui

Enhance Your Text Areas with Vue.js Filtering

Currently, I am working with a textarea that has v-model: <textarea v-model="text"></textarea> I am wondering how to filter this textarea in Vue. My goal is to prevent the inclusion of these HTML quotes: &amp;amp;#039;id&amp;amp;#039 ...

javascripthtmlvue.jsvuejs2vue-component

What is the process for altering the background color in this html5up template?

I am struggling to change the brown background color on my website. Despite updating various color values in the CSS file such as'backgroundcolor', I seem unable to make any changes. I have tried altering multiple color entries, but nothing seems ...

htmlcssbackground

Achieving Flexbox compatibility with child elements in a horizontal MUI Collapse Component and TransitionGroup transitions: A comprehensive guide

Struggling with incorporating the Collapse + TransitionGroup Component in MUI while trying to make the containers expand using flexbox. <Box sx={{display: 'flex', height: '100vh', width: '100vw'}}> <Box sx={{flex: 1 ...

cssreactjsflexboxmaterial-uicss-transitions

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

Update picture using Vanilla Javascript for mobile display

I am looking to change my logo color to white when viewed on mobile devices. Currently, I have the following code for changing the logo on scroll using vanilla JavaScript. The code toggles between a dark and light logo based on the scroll position. Howev ...

javascripthtml