On a desktop view, the content is displayed in 4 columns, while on smaller

In my simple block, I am trying to arrange 4 items in a row on desktop and 2 items per row on smaller devices like tablets and mobile. The desired layout is shown below: https://i.sstatic.net/3i799.png

To see a live demo, visit: jsfiddle

Below is the HTML code I have used:

<div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">Column 1</div>
      <div class="col-md-3 col-sm-6">Column 2</div>
        <div class="w-100 visible-sm" ></div> //tried this but not working
      <div class="col-md-3 col-sm-6">Column 3</div>
      <div class="col-md-3 col-sm-6">Column 4</div>
    </div>
  </div>

I'm having trouble figuring out what's causing the issue. Can you help?

htmlcssbootstrap-4flexboxbootstrap-5

Answer №1

Your columns are not adjusting correctly for the smallest breakpoint, causing them to go full-width. To fix this, simply update the classes to switch the sm classes:

<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col-md-3">Column 1</div>
    <div class="col-6 col-md-3">Column 2</div>
    <div class="col-6 col-md-3">Column 3</div>
    <div class="col-6 col-md-3">Column 4</div>
  </div>
</div>

Check out the Fiddle demo

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

WordPress does not allow self-referencing within the same site

I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...

htmlwordpress

Adaptive grids in Bootstrap

I've been using bootstrap and I'm trying to get the items to align next to each other, but using the bootstrap columns doesn't seem to be working for me. I may be coding it incorrectly. <link rel="stylesheet" href="https://cdn.jsdelivr ...

htmlcsswebbootstrap-4

Troubleshooting Display Problems when Switching Bootstrap Themes in ASP.NET MVC

I recently made changes to my MVC project by switching the default Bootstrap theme to Bootswatch - Cosmos. However, I am facing an issue with the Navbar as shown in the image below: View Header Display Issue Image Initially, I was using Bootstrap 3.0 and ...

cssasp.netasp.net-mvctwitter-bootstrapbootstrap-4

CSS: positioning controls at opposite ends of a table cell

I need help with styling a button and textbox inside a table cell. Currently, the button is stuck to the textbox, but I want them positioned at opposite ends of the cell. How can I achieve this? <td style= "width:300px"> <asp:TextBox ID="Tex ...

htmlcss

Exploring user inputs and displaying variables using JavaScript and HTML 4.01

I was testing some code and I'm facing an issue that I can't figure out: <HTML> <head> <title> Page 1 </title> <script> function myFunction() { var x=document.getElementById("myEmail") document.write(x) } </scr ...

javascripthtmlhtml4

Switch the class of the Parent Component to that of the Child Component

Dashboard.html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-categories-tab" data-bs-toggle="tab" data-bs-targ ...

angulartwitter-bootstrapbootstrap-5primengnav

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...

javascriptphpjqueryhtml

Tips for displaying nested JSON arrays in HTML using Ember.js

I'm having trouble displaying the JSON data I get in app.js using HTML. Any suggestions? Here is the code for app.js (I am confident that $.post is returning valid JSON) App.CadeirasRoute = App.AuthenticatedRoute.extend({ model: function() { a ...

jqueryhtmlajaxjsonember.js

Issue with the alignment of cards in the group of cards

Struggling to align the bottom sections of these elements. Despite consulting Bootstrap references, I can't figure out what's causing this misalignment. I thought using the card-group class would align the bottoms of its children, but it doesn&a ...

angularbootstrap-4

How can I make a div's height match that of another div?

I am curious about adjusting the height of a div based on its content. In this case, I have the following HTML structure: div.Pantalla { background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg"); background-size ...

htmlcssangular

Updating backgroundPosition for dual background images within an HTML element using Javascript

Issue at Hand: I am currently facing a challenge with two background images positioned on the body tag; one floating left and the other right. The image on the left has a padding of 50px on the left side, while the image on the right has a padding of 50px ...

javascriptcss

When overflowY is set to auto, the dropdown may be cut off if there are

https://i.sstatic.net/Twcnp.png My col-4 has overflow-y set to auto, but my dropdown gets cut off behind another col when it's open. If I change overflow-y to visible, the dropdown is no longer cut off but the max-height parameter is ignored. const ...

htmlcssreactjsoverflow

Resize Pictures in Carousel for Smartphones

Currently, I am in the process of optimizing my website for mobile devices. The NivoSlider, which is used throughout the site, does not seem to scale well on smaller screens. Despite trying various methods in the mobile section of my stylesheet such as " ...

cssmobilescalinghandheld

Create a variety of tables populated with numerous hyperlinks within each table on a webpage

I have a website where I need to display multiple tables with different data, along with appropriate links within the table cells. Plan: Each table on the webpage represents a different school subject, showcasing performance metrics such as SAT scores, fi ...

javascriptphphtmlmysql

Having trouble getting rid of the border-bottom?

I have been attempting to customize the appearance of the React Material UI tabs in order to achieve a design similar to this: https://i.stack.imgur.com/tBS1K.png My efforts involved setting box-shadow for the selected tab and removing the bottom border. ...

javascripthtmlcssreactjsmaterial-ui

Why does the "margin" CSS style fail to function properly in FlowPanel within GWT?

I'm currently working with Gwt and have encountered a problem with styling buttons. Let's take a look at the following code snippet: .marginRight{ margin-right: 10px; } FlowPanel myFP=new FlowPanel(); Button myButton=new Button("Button"); Butt ...

cssgwt

Hide in certain zones, contextual menu

I recently discovered how to create my own context menu with links based on the div clicked (check out here for more details). However, I am facing an issue now. I am struggling to prevent the context menu from appearing above the specific div boxes where ...

javascriptjqueryhtmlcontextmenu

Dealing with interstitial advertisements on mobile devices: What is the best approach for handling zoom?

I am facing a challenge with displaying interstitial ads on mobile sites. Different publishers may have varying viewport settings and initial scales on their mobile sites, making it difficult to ensure that the ad appears correctly on all devices with the ...

javascriptcssadsinterstitial

Looking to transfer the name of the clicked link to a modal in order to execute a PHP/SQL query within the modal window

I am currently utilizing Twitter Bootstrap's modal feature. Within my table, I am mapping MAC addresses to vendor names using the following code: <tbody> <?php foreach ($rowarr as $k => $v) { ?> & ...

phpjavascripthtmlpostmodal-dialog

Unable to play GSM extension files on a web browser due to compatibility issues

I've been attempting to play an audio file with a (.gsm) extension using <audio>, object tags, and JavaScript. <script> var myAudio = new Audio(); // creating the audio object myAudio.src = "test.gsm"; // assigning the audio file t ...

javascripthtmlaudio