Brand-new in Bootstrap 4 (Alpha 3): flexible card columns with the ability to customize the number of

In my project with Bootstrap 4 (Alpha 3), I am working on customizing the number of columns in Card Columns. The documentation provides an example that shows how to set different column counts based on screen size:

.card-columns {
      @include media-breakpoint-only(lg) {
        column-count: 4;
      }
      @include media-breakpoint-only(xl) {
        column-count: 5;
      }
    }

Since the default column count is 3 (except for small devices), I attempted to change it to 2 columns using additional CSS code after including the Bootstrap CSS:

.card-columns {
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
  @include media-breakpoint-only(md) {
    column-count: 2;
  }
  @include media-breakpoint-only(lg) {
    column-count: 2;
  }
  @include media-breakpoint-only(xl) {
    column-count: 2;
  }
}

However, despite my efforts, the result still shows 3 columns instead of 2. What could be causing this issue?

I appreciate any assistance you can provide! Thank you.

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Answer №1

To achieve the desired layout changes, make use of the @media CSS tag. Simply insert the provided CSS code snippet into your site's stylesheet to implement the adjustments.

@media (min-width: 576px) and (max-width: 768px)
{
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

The crucial adjustment lies in modifying the "column-count" property as required.

You have the flexibility to alter the min-width and max-width values with any of Bootstrap's grid options to suit your specific needs. For detailed information on Bootstraps Grid Options, please refer to Bootstraps Grid Options.

Answer №2

Utilizing SASS for modifying the media-breakpoint-only feature can help create responsive designs.

.card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

See it in action here: http://codeply.com/go/nHZg5n2vuE

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 are the best methods for maintaining the appearance of my website when resizing my browser window?

I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same rela ...

htmlcsstwitter-bootstrapresponsive-design

The position of the searchclear button has been shifted

My livesearch script is working well, but there seems to be a displacement issue with the searchclear button in the image below. I have two JavaScript scripts on my page and I loaded two CDNs, which I believe is causing this displacement. Can someone pleas ...

jquerycss

Display or conceal various content within div elements using multiple buttons

I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...

javascriptjqueryhtmlcssshow

Tab indicator modified to match the text's material design

I want the tab indicator to adjust its size based on the text. For example: https://i.sstatic.net/a8Y0I.png https://i.sstatic.net/xniMb.png Should I use JavaScript for this purpose? I am currently using Angular. Here is my HTML code: <div class="r ...

javascripthtmlcssangular

What causes child margins to extend beyond the boundaries of div elements?

Can anyone shed some light on the advantages of CSS behavior that allows a child element's top and bottom margins to extend beyond the boundaries of its block-parent? Check out this fiddle for a straightforward example. The pink div is influenced by ...

css

What could be causing my paragraph to shift when an animated expanding header is applied in CSS?

For a school assignment, I am facing an issue where the paragraph is being affected by my CSS animation on the main header title that expands and contracts. My goal is to keep the paragraph in a fixed position without being moved by the header animation (V ...

htmlcss

Adjust multiple components at once

I'm working on creating a "textarea" with a toolbar that displays rich text content based on the HTML content stored in the background textarea. Here is an example of the HTML structure: <div class="primary-content"> <div class=" ...

javascripthtmlcssresize

Initiating a sequential CSS launch using JQuery

Looking for a way to create a dynamic animation using JQuery and .css? This code will rotate letters left, then right, then left, then right again while moving up. $('.envelope').click(function() { $(this).find('.list') .animat ...

javascriptjquerycss

Experiencing trouble with aligning input fields in a Bootstrap layout

When working on a user interface design, I wanted to have different containers with various input type elements. However, I encountered an issue where the datetime picker in one row was not aligning properly with labels above and below it. <div class=" ...

cssbootstrap-4

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

javascriptcssreactjstwitter-bootstrapflexbox

Problem with Bootstrap-slider not loading correctly

I seem to be facing an issue with selecting DOM elements that are part of bootstrap-slider. When I try to target them with events like click, nothing happens. All events work fine when the page is refreshed. What could be causing this problem? $(document ...

javascriptjquerycssbootstrap-slider

Ensure the child element is displayed at its maximum height within a parent container that includes overflow:auto

I have been trying to create a mask for a list of elements within a fixed width and height parent. The parent has overflow:auto set, so when new elements are added to the list, the parent scrolls. However, I am facing an issue where the mask does not adjus ...

htmlcssscrollheight

Remove three text elements to the right of the small icon with no line breaks

I am trying to align three text items to the right of a smaller left-floated icon without causing the text items to wrap. div { width:30%; } div i { margin-right:0.75em; padding:0.5em; float:left; color:#fff; border-radius:50%; ...

htmlcss

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

Choose only the li elements that have been specifically clicked on

As a beginner, I am working on a project where I need to select the specific li element that is clicked using jQuery. However, I am facing an issue where clicking on one li selects all of them at once. Here is the link to my code snippet: JS FIDDLE This ...

javascriptjqueryhtmlcss

The UL element does not float to the right in the navbar of Bootstrap 4 Beta

I have noticed that other users have also inquired about this issue without receiving any correct responses. I attempted using float-right and float-xs-right without success. Below is the complete code for the entire webpage as requested. <!doctype h ...

css-floathtml-listsbootstrap-4

what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including lan ...

htmlcssresponsive-designmedia-queries

What could be the reason for the loss of default browser focus on this accordion navigation?

Why is the browser default focus being lost on this accordion navigation? <div class="panel panel-default"> <div class="panel-heading"> <button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-to ...

htmlcsstwitter-bootstrapaccessibility

Text area with a set height and expandable max-height - scrollable overflow

http://codepen.io/africanmatt/pen/IcGpa .text { max-height: 0; overflow-y: auto; transition: all .45s ease-in-out; } .text-active { max-height: 50%; } I am looking for a way to resize the .text component's max-height so that it adjusts prop ...

jquerycssheightflexbox