Creating a layout with four columns in the Bootstrap grid that will automatically collapse to two columns and then one column as

Check out my progress with Bootstrap:

<div class="container-flex">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>

I have a basic setup with 4 columns that collapses into a single column on the large (lg) breakpoint. Is there a way to modify it so that it collapses into two columns on the large breakpoint and then into one column on the medium (md) breakpoint? I've searched through various Bootstrap tutorials but haven't found a solution yet.

Take a look at my code on jsfiddle: https://jsfiddle.net/noe562h0/

htmlcssbootstrap-4

Answer №1

Give this a shot!

<div class="flex-container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">A</div>
        <div class="col-12 col-md-6 col-lg-3">B</div>
        <div class="col-12 col-md-6 col-lg-3">C</div>
        <div class="col-12 col-md-6 col-lg-3">D</div>
    </div>
</div>

For more information on Bootstrap 4 grid layouts, you can check out the documentation at Bootstrap and w3schools.com.

Answer №2

To achieve a unique layout, you must adjust your breakpoints accordingly. Here's an example:

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

Answer №4

Check out this code snippet on JSFiddle

<div class="container-flex">
    <div class="row">
    <div class="col-lg-3">
      <div class='col'>1</div>
        <div class='col'>2</div>
    </div>
      <div class="col-lg-3">
      <div class='col'>3</div>
        <div class='col'>4</div>
      </div>

    </div>
</div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  text-align:center;
}

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

What is the procedure for eliminating an event listener that does not directly invoke a function?

I have implemented an event listener in my JS file following a successful AJAX request: var pageButtonsParentElement = document.getElementById("page-buttons"); pageButtonsParentElement.addEventListener('click', event => { ...

javascripthtmljqueryajax

What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

htmlcsssubmenu

Pictures are not appearing correctly on screens with small dimensions

I'm struggling with creating a responsive website, specifically with images that have a background-imaged mask. While they look fine on larger screens, on medium and small screens, my headline and some images are not visible with the "masked" backgrou ...

cssbootstrap-4maskresponsive-images

What's the best way to align grid items that are positioned next to each other in CSS Grid?

I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got ...

htmlcsscss-grid

Delete chosen border from photo in html

I have a logo carousel on my website and when I click on one of the logos, a black outline appears indicating that it is selected. I've tried using img::selection { background: transparent; } but it didn't work as expected. I want to get rid of ...

htmlcssselectcss-selectorscarousel

How to prevent CSS styles from being overridden by SASS in a stylesheet

When working with a Sass file, I encountered an issue with the way styles were being output. The original style in the Sass file looked like this: .style{ width: calc(100%); } However, when compiled to its corresponding CSS file, the output was: .style{ ...

htmlcsssass

What causes the unexpected behavior of JQuery's .animate() function?

I am currently working on a project that involves creating a div element for the purpose of dragging and dropping files. My goal is to have the height of the div increase when a file is dragged into it, and decrease when the file is dragged out. To achiev ...

javascriptjqueryhtmlcss

Attempting to conceal an HTML 'label' element by employing CSS 'hide' properties

Why is it so difficult to hide a checkbox that says "Remember Me" on my membership site login form? The HTML code snippet causing the issue: <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</la ...

css

Can we trust the security of this form?

Is the form secure when sending emails? Any security issues with SQL involvement? HTML: <form id="form4" action="send_mic.php" name="form4" method="post" > <textarea name="message4" cols="4" rows="4" id="message4" ></textarea ...

phpjqueryhtmlformssecurity

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

javascriptjqueryhtmlcss

"Seamless responsiveness in design with jQuery, but encountering compatibility issues

My usage of jQuery is quite basic to ensure that elements are properly positioned when they are moved: function ipad() { var width = jQuery(window).width(); if (width < 1200 && width >= 768){ //if tablet jQuery('.mobbut').css(&apo ...

javascriptjqueryhtmlcssfirefox

Enabling HTML elements in a postback operation

In my user interface, there is a text box where users can input text containing HTML markup. Whenever the page triggers a postback action, it results in an error (500) as the parser interprets the HTML code in the textbox as a hacking attempt. I vaguely ...

asp.nethtml

Differentiating between the components and contents of a webpage during the process of web scraping

import mechanize from bs4 import BeautifulSoup import urllib2 import cookielib cj = cookielib.CookieJar() br = mechanize.Browser() br.set_handle_robots(False) br.set_cookiejar(cj) br.open("*******") br.select_form(nr=0) br.form['ctl00$BodyConten ...

pythonhtmlweb-scraping

Creating vibrant tables with unique color schemes using Thymeleaf

Is there a way to create a table with different colors using Thymeleaf? I have a list of events with risk weights represented by integer values. Each column in the HTML table should be colorized based on certain conditions. For example, if the risk is le ...

javahtmlcssthymeleaf

resizing videos in wordpress

Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...

phphtmlcsswordpressvideo

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

htmlcss

Automatically setting the navbar to expand on medium devices

I am facing an issue while styling my navbar with BS5 installed. I have noticed that the className navbar-expand-md is being assigned, even though I have specified navbar-expand-custom in my code. navbar = _dbc.Navbar( [ _dbc.C ...

pythoncssbootstrap-5plotly-dash

What is the correct way to include viewport width in pixels using CSS?

My div is set to a width of 50vw with padding of 25px on all sides. I am looking to add a fixed element to the right of it by increasing its width by 50vw and adding 25px. Can this be achieved using only CSS, or should I consider using Less? If so, how c ...

htmlcss

A comprehensive guide on implementing form array validations in Angular 8

I am currently using the formArray feature to dynamically display data in a table, which is working perfectly. However, I am facing difficulty in applying the required field validation for this table. My goal is to validate the table so that no null entry ...

htmlangular

Encountering [Object Object] within an angular2 app

https://i.stack.imgur.com/iceKH.pngI recently created an angular2 application using ngrx/effects for handling http calls. My reference point was an application on GitHub. However, I am facing an issue where the response from the HTTP call is not displaying ...

htmlangularrestngrx-effects