Implementing Column Wrap Functionality in Bootstrap 4

-> how do I arrange columns in a responsive view with one column followed by another? Please see the attached screenshot for reference on what I want in Bootstrap 4 for iPad view.

https://i.sstatic.net/wf83b.jpg

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');
body {
  font-size: 15px;
  line-height: 28px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;            
}
.video-thumb .video-icon {
  width: 35px;
  height: 35px;
  background-color: rgba(0,0,0,.9);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;    
}
.thumbnail-main, .video-content {
  margin-bottom: 20px;
}
img {
  max-width: 100%;
}
.inner-content span {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 12px;          
 }
.inner-content a.link {
  color: #208385;
}
h5 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
section {
  padding: 100px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
    </div>
  </div>
</section>

csshtmlbootstrap-4

Answer №1

When working with Bootstrap columns, it's important to remember that each row can only have a total of 12 columns. For example, in your code snippet, you have divs with 4, 8, 4, and 8 columns.

To correct this issue, you should structure your code like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

I've organized the cards within a div that includes a row with classes col-md-4 and col-lg-12. This will display the cards stacked on top of each other on smaller screens like tablets, but side by side on larger screens. I hope this solution addresses your concerns!

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

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

I'm trying to create a grid with 2 rows and 3 columns, each cell having an image with a max-width of 512px. I added margin to the grid but now the cells are larger than the content. How can I achieve the same visual appearance as flexbox's justif ...

htmlcsscss-grid

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Adaptable backdrop picture within a full-width container

Currently experiencing an issue with my website that requires some assistance. When a user visits my site, the image of the 'cutlery pouch' will resize based on the size of the user's browser or monitor. However, some users are seeing the b ...

htmlcssbackground-image

The filter designed for rearranging elements will not function

let wrap = document.querySelector(".wrap"); let temp = document.querySelector(".temp"); temp.addEventListener("click", (event) => { // grabs the first paragraph child element, which is working correctly console.log(wrap.children[0].firstElementChild ...

javascripthtmlarraysfilterelement

Adjust SVG size as per parent container in AngularJS custom directive

I have a unique situation where I am integrating an angular directive into a dynamically-sized element. The directive itself is made up of an SVG which adjusts based on the size of the container. I am working on making sure the SVG automatically resizes an ...

javascriptcssangularjssvgcross-browser

The Selenium chromedriver sometimes fails to recognize specific websites or their components

Having trouble with a Python script designed to interact with a specific website using ChromeDriver. The script is unable to locate any elements or print the page source, as the entire page is nested within multiple frames. Suggestions from others involved ...

pythonhtmlseleniumselenium-chromedriverframe

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here a ...

javascriptjqueryhtmlcssbootstrap-4

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

javascripthtmljqueryajaxlaravel

Tips for triggering both server side and client side events in ASP web forms

In an ASP.NET web form, I have the following code snippet: <asp:UpdatePanel ID="udpNames" runat="server"> <ContentTemplate> <div class="expanderheaders"> <asp:Image ID="epImgNames" ...

asp.netcssajaxjquery

Height not being applied to DIV container

I'm facing an issue with my CSS code that is causing images to break the row after reaching the end of the DIV. However, the container behind it is not adjusting its height according to the images. The height should expand along with the images. Here ...

javascriptphpjqueryhtmlcss

Enhance the appearance of the navbar on mobile devices by customizing the styling in Bootstrap 5

Hi everyone, this is my first time posting a question here so please be gentle :) I recently implemented a script to change the CSS of my navbar when scrolling. window.addEventListener("scroll", function () { let header = document.querySelector(".navbar") ...

javascripthtmlcssnavbarbootstrap-5

What might be the reason for the misaligned positioning of the ThreeJS canvas when the browser window is resized?

My goal is to perfectly align a ThreeJS canvas (with a blue background and yellow text) within the transparent cut-out of the green image. So far, everything is working fine, but I've noticed that resizing the browser window or zooming causes the canv ...

javascripthtml3dthree.jshtml5-canvas

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...

javascriptcsscanvassvgcanvg

Efficient page navigation bar that doesn't clutter the layout

I'm facing an issue with my navbar setup. I want it to stay at the top of the page without being sticky. However, the presence of the navbar is causing a scroll to appear on my page. This happens because: The navbar takes up space I sometimes use tri ...

javascripthtmlcss

Why isn't the 100% max-width image liquid layout being applied?

This whole concept of liquid layout is new to me. It's frustrating how everything in my layout adjusts except for the images. I've been attempting to use max-width: 100% on images, as recommended in various sources. Yet, no matter how I define ...

cssliquid-layout

I am experiencing difficulty locating the style.css file within my Node.js/Express application

I am currently working on a Node.js/Express app and I'm facing an issue where my browser is unable to find my style.css file, even though I am using a static file. Here is the directory structure: public -> css -> styles.css server -> serv ...

cssnode.jsexpress

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

Stylish CSS popup backdrop

I have very limited CSS knowledge and struggle with the syntax, but I am trying to customize my Wikipedia experience using Chrome and the Stylish addon. I found some code online and modified it to create a dark theme, but now I'm stuck because I need ...

htmlcssstylish

I am just beginning my coding journey and could use some assistance with resolving this dilemma. I have included a photo for reference. I am struggling to add some space after the final card

click here for image description Can someone assist me in creating some space following the final card? ...

htmlcssresponsive-design

What is the method for establishing an interval, removing it, and then reinstating the interval with the identical ID?

I'm wanting something along these lines: Inter = setInterval(Function, 1000); clearInerval(Inter); Inter = setInterval(Function, 1000); I've tried something similar without success. It's hard to explain all the details in a tidy way. Can a ...

javascriptjqueryhtmlcssweb