The responsiveness of Bootstrap 4 row layout leaves much to be desired

Currently, I am in the process of designing an HTML template for a news article layout using Bootstrap 4 and working on the MEAN stack environment. However, these specifics shouldn't impact the overall design...

The primary requirement is to have one 'featured' article displayed in its own column, along with 8 other articles split into two rows within another column. When the layout is viewed on smaller screens or mobile devices, the additional articles should stack beneath the featured article and each other as needed:

Desktop View:

-----------------------------------------------------------------
                 | Article 1 | Article 2 | Article 3 | Article 4 |
Article 0        |                                               |
                 | Article 5 | Article 6 | Article 7 | Article 8 |
-----------------------------------------------------------------

Mobile View:

-----------------
Article 0
-----------------
Article 1
-----------------
Article 2
-----------------
.
.

To implement this layout, I am currently using the following code:

  <div>
    <div class="row">
      <div class="col-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-3">
            Article 1
          </div>
          <div class="col-3">
            Article 2
          </div>
          <div class="col-3">
            Article 3
          </div>
          <div class="col-3">
            Article 4
          </div>
          <div class="col-3">
            Article 5
          </div>
          <div class="col-3">
            Article 6
          </div>
          <div class="col-3">
            Article 7
          </div>
          <div class="col-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

While this layout works perfectly on desktop view, it causes all elements to display jammed together on a single row when viewed on mobile. Ideally, I would like them to stack into a single column on smaller screens. My suspicion is that the outer <div class="row" is responsible for this behavior on mobile, but removing it interrupts the placement of Article 0 alongside the others on desktop. It seems like there may be a better way to accomplish this layout without compromising the responsiveness.

Could someone provide guidance on how to adapt this desktop-friendly layout for optimal rendering on mobile? Thank you in advance!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To apply a specific column width for a particular screen size, you can use the following syntax: col-<strong>sm</strong>-3, where you replace "sm" with either -md, -lg, or -xl depending on the target screensize.

Your code snippet could be modified as shown below:

  
      <div>
        <div class="row">
          <div class="col-md-4">
            <div>
              Article 0
            </div>
          </div>
          <div class="col-md-8">
            <div class="row">
              <div class="col-md-3">
                Article 1
              </div>
              <div class="col-md-3">
                Article 2
              </div>
              <div class="col-md-3">
                Article 3
              </div>
              <div class="col-md-3">
                Article 4
              </div>
              <div class="col-md-3">
                Article 5
              </div>
              <div class="col-md-3">
                Article 6
              </div>
              <div class="col-md-3">
                Article 7
              </div>
              <div class="col-3">
                Article 8
              </div>
            </div>
          </div>
        </div>
      </div>

For more information, refer to Bootstrap's grid documentation.

Answer №2

By specifying <div class="col-3">, Bootstrap is instructed to allocate three columns for that div on all breakpoints, including the smallest screens. To address this issue, you can adjust it so that the div spans the full width on small screens using col-12 and only occupies three columns on medium-sized screens and above with col-md-3. For example, use 

<div class="col-12 col-md-3">

 <div>
    <div class="row">
      <div class="col-12 col-md-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-12 col-md-3">
            Article 1
          </div>
          <div class="col-12 col-md-3">
            Article 2
          </div>
          <div class="col-12 col-md-3">
            Article 3
          </div>
          <div class="col-12 col-md-3">
            Article 4
          </div>
          <div class="col-12 col-md-3">
            Article 5
          </div>
          <div class="col-12 col-md-3">
            Article 6
          </div>
          <div class="col-12 col-md-3">
            Article 7
          </div>
          <div class="col-12 col-md-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

Check out this Bootply example

Answer №3

Consider using col-md-* in place of col-*. For more details, check out this link

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4">
    <div>
      Article 0
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-3">
        Article 1
      </div>
      <div class="col-md-3">
        Article 2
      </div>
      <div class="col-md-3">
        Article 3
      </div>
      <div class="col-md-3">
        Article 4
      </div>
      <div class="col-md-3">
        Article 5
      </div>
      <div class="col-md-3">
        Article 6
      </div>
      <div class="col-md-3">
        Article 7
      </div>
      <div class="col-md-3">
        Article 8
      </div>
    </div>
  </div>
</div>

Answer №4

If you want to center the content, I recommend using the command col- *

I created a sample layout that aligns the content in the middle as shown in the demonstration

.flex{
  display: flex;
}

.align-middle{
    margin-top: auto;
    margin-bottom: auto;
}

div.borda{
  border: 1px solid red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-4 flex borda">
    <div class="align-middle">
      Article 0   
    </div>
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-3 borda">
        Article 1
      </div>
      <div class="col-3 borda">
        Article 2
      </div>
      <div class="col-3 borda">
        Article 3
      </div>
      <div class="col-3 borda">
        Article 4
      </div>
      <div class="col-3 borda">
        Article 5
      </div>
      <div class="col-3 borda">
        Article 6
      </div>
      <div class="col-3 borda">
        Article 7
      </div>
      <div class="col-3 borda">
        Article 8
      </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

Incorporating Card Layouts with SwiperJS

Reference Code: See Example on Code Sandbox I am looking to implement a swiper that allows for navigating one slide at a time with a layout where slidesPerView: "auto" and fixed width are used. The first two slides behave as expected, but the la ...

javascripthtmlcssswiper.js

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

cssangulartwitter-bootstrapng-bootstrap

Pause the counter based on the data attribute containing multiple values

I have a collection of div elements, each with a unique data-attribute value. My goal is to display these values in the divs using JavaScript by incrementing a counter. const numbers = document.querySelectorAll(".number"); console.log(numbers); let c ...

javascripthtml

CSS Grid generates a unique container for every HTML element

My website's CSS code includes the following: *{ height: 100%; width: 100%; margin: 0; } .grid{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .grid div:nth-child(odd){ border: black 2px so ...

htmlcssvue.jscss-grid

As the cursor moves, the image follows along and rotates in sync with its

Can anyone help me figure out how to create a moving image that follows the mouse cursor? I have a radial pie menu with an image in the middle, and I want it to spin and rotate as the mouse moves. Any ideas on how I can achieve this effect? I would greatl ...

javascripthtmljquerycss

Whenever the value of the div is evenly divisible by 5, set it to automatically move to the next column

I have created an array mapping that renders the expected output. However, I am facing a challenge where I want the items to go to the next column if their number is divisible by five while keeping the vertical alignment of divs. How can I achieve this wit ...

javascripthtmlcssarraysreactjs

Animation for Images in Angular v1.2

After reviewing tutorials and previous questions, I have been trying to pinpoint where my code is going wrong in applying an animation to transition between the images I want to display. The ng-show function effectively displays the selected picture, but ...

javascripthtmlcssangularjscss-animations

Integrating a Windows form control onto a webpage using ActiveX in Windows 8

When using activeX to host a Windows form control on a web page, I encountered an issue where a cross icon is displayed instead of the control on Windows 8 IE (not in metro IE). Interestingly, the same web page hosted on Windows 7 works perfectly fine in I ...

c#htmlasp.netwindows-8activex

stop the menu component from triggering a re-render

I am facing an issue where the menu opens and closes briefly when I refresh the page. I want to find a way to prevent this re-rendering process. Every time I refresh, my console.log shows: false 'open' navigation.jsx:23 item navigation.jsx: ...

javascripthtmlreactjsreact-hooksfrontend

After transitioning my Image Modal from an ID to a Class, it appears to not be functioning properly

I recently implemented an image modal on my website using the ID attribute, but it didn't seem to work as expected. After changing the id to a class, now the image modal is not functioning at all and I'm struggling to figure out what went wrong. ...

javascriptphphtml

Display or conceal columns based on their index

<div ng-controller="checkBoxController"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="moda ...

javascripthtmlangularjshtml-table

Tips for personalizing a column graphic in HTML

Currently, I am utilizing chart.js but struggling to create a chart like the one shown below https://i.sstatic.net/axSFP.jpg where the bar aligns with the dotted line. I attempted this approach in JSFIDDLE Kindly recommend some resources that can help ...

javascripthtmlcsscanvas

I am experiencing an issue where the text is not appearing in my Bootstrap

As a newcomer to Bootstrap and CSS, I'm aware that my question might reflect my lack of experience in these areas. Here is my query: Scenario: I am utilizing Bootstrap along with the [Grayscale theme] to create a basic tool that will assist my stude ...

htmlcsstwitter-bootstrap

It seems like the Overflow Hidden feature is not functioning as intended

I'm facing an issue with the overflow:hidden; property not working as expected. My goal is to have multiple inline elements inside a div be cut off at 20 pixels using overflow: hidden; Here's the code snippet: <div class="container"> ...

htmlcss

The Django image form fails to save the image uploaded

I've encountered an issue with a form that includes uploading a profile picture. While I can successfully upload images in the /admin/ interface and display them correctly, I'm facing difficulties saving the image using my Modelform. This is wha ...

pythonhtmldjangodjango-forms

I am experiencing an issue with my localhost website where the images only display after I open the files in VScode. Is there a way to load the images correctly using app.js?

app.js While working on web development in VScode, I've encountered an issue where the images on my localhost website only appear after opening files like home.pug and contact.pug alongside app.js. Is there a way to make the images load properly witho ...

javascripthtmlnode.jsexpresspug

Creating a Dynamic Division Using jQuery

I'm new to jQuery and I need help creating individual divs and submit buttons with unique names for each one. Can someone assist me? $(document).ready( function() { init(); }); function init() { setTimeout( function() { fetchUpdate ...

jqueryhtml

Ways to retrieve span element content

Is there a way to access all the span values within this code snippet? I know how to access one, but I need a solution for accessing all span values. Can anyone help me out with this? p = summaryContainer.parentElement.firstElementChild; <div class ...

html

Is there a way to transfer string input from a webpage to a @RestController as a Java object?

My inquiry is quite rudimentary. Here is the HTML snippet that I have: <form action="/login" method="GET"> <div> Id: <input type="text" name="id" value="id"/> Name: <input type="text" name="name" value="name"/> ...

javascripthtmlspringspring-mvcspring-boot

How to design a dynamic css navbar that transforms as you scroll?

Upon reviewing the link below, it appears to work perfectly fine. However, when I test it on my desktop (with all the links in place), the navbar's CSS does not change as expected when scrolling down to the next section... <body> <nav clas ...

javascriptjqueryhtmlcss