Adjust the number of columns in a Bootstrap photo gallery

I recently integrated this example into my web application: https://getbootstrap.com/docs/5.0/examples/album

Although it's working well, I'm looking to adjust the number of columns from 3 to 2. Is there a way to achieve this?

This is a snippet of my code:

<div class="album py-5 bg-light">
    <div class="container">

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

            <div id="swap-image-container" style="display: none;" class="col">
                <div class="card shadow-sm">
                    <img id="swap-image" class="bd-placeholder-img card-img-top" width="100%" height="100%"/>
                    <div class="card-body">
                        <p class="card-text">Swap image. Face replacement result.</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="enchanced-swap-image-container" style="display: none;" class="col">
                <div class="card shadow-sm">
                    <img id="enchanced-swap-image" class="bd-placeholder-img card-img-top" width="100%" height="100%"/>
                    <div class="card-body">
                        <p class="card-text">Enchanced Swap image. Face replacement result with post-processing.</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

I attempted to modify the bootstrap class names to change the column count, but unfortunately, it didn't have any effect.

htmlcssbootstrap-5

Answer №1

To modify the column layout from 3 to 2, all you need to do is:

row-cols-md-3 -> row-cols-md-2

Alternatively, you can remove it altogether and ensure two columns are displayed on all screens larger than small:

<div class="container">
      <div class="row row-cols-1 row-cols-sm-2 g-3">

Refer to: Row columns

Demo (using Bootstrap version 5.0.2; make sure to have the latest example version: https://getbootstrap.com/docs/5.3/examples/album/):

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299879985">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf4eaf6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 g-3">
        <div class="col">
          <div class="card shadow-sm">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

            <div class="card-body">
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                </div>
                <small class="text-muted">9 mins</small>
              </div>
            </div>
          </div>
        </div>>
       ...More Content...
       
    </div>
  </div>


</body>

</html>

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

Can someone guide me on how to retrieve data from a MUI table within a React project

Currently, I am retrieving data from a server in JSON format and looping through this data to display specific information. Everything is functioning as expected, but I'm encountering an issue with a Popover element that contains items with onclick ev ...

javascripthtmlreactjsjsonmaterial-ui

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

javascriptcssangularjsangular

JQuery is blocking the submission of an HTML form

During my exploration of an AJAX/JQuery tutorial for a registration script that interacts with PHP/MySQL and is submitted via JQuery, I encountered a recurring issue. The problem lies in the form submitting directly to the action page instead of its intend ...

javascriptphpjqueryhtmlajax

Is it possible to use JavaScript to scrape content from another website and incorporate it into my HTML document?

Attempting to web scrape another website in order to display its content on my own site. I have written JavaScript code that works, but only when triggered on the website's onClick event. var button = document.getElementById("scrape-website"); button ...

javascripthtmlfunctionasynchronousweb-scraping

Start a HTML 5 video and pause any others playing

On my webpage, I have a series of HTML5 videos listed, but I want to ensure that when one video is played, the others automatically stop or pause. The framework I am using is Angular 2 with TypeScript. <video controls (click)="toggleVideo()" #videoPla ...

htmlangulartypescriptangular2-template

Achieving optimal functionality of @media queries when using buttons

My goal here is to achieve the following: Make these buttons responsive on all screen sizes Ensure that the buttons shift down when the screen size reaches Mobile size or smaller, while maintaining at least 4 buttons per row for future additions When the ...

htmlcssbuttonresponsive-designmedia-queries

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

javascriptandroidhtmlcsswinjs

Is there a way for me to determine the total duration of a testcase's execution?

What is the most useful command/target to use from beginning to end of a testcase in Selenium IDE - HTML? Could you provide an example? ...

htmlseleniumcoding-style

Tips for showcasing the elements of an arraylist in a dropdown menu

I have a query that retrieves information about different tag numbers associated with individual IDs. Each ID can have multiple tag numbers, which I am storing in an ArrayList. My goal is to display the contents of this ArrayList in a dropdown menu on an H ...

htmljsparraylist

Creating a distinctive appearance for JavaScript's default dialogue box

Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...

javascriptcss

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

csslayoutcomboboxjavafxsize

Getting the most out of option select in AngularJS by utilizing ng-options

I'm currently working with AngularJS and I am interested in utilizing ng-options for a select tag to showcase options organized under optgroups. Here is the array that I intend to use in my select option: $scope.myList = [ { "codeGroupComp ...

javascripthtmlangularjs

Enhance your Flask application by incorporating Bootstrap toast notifications with Flask Flash

Currently, I am utilizing Boostrap-Flask (not Flask-Bootstrap) in conjunction with Bootstrap 5. After saving a form, I can utilize Flash to showcase an alert using the Bootstrap-Flask macro render_messages Though everything is functioning correctly, I am ...

pythonflaskbootstrap-5

Incorporating CSS style to individual rows in an HTML table

Is there a way to determine if a specific string, such as 'LA DEFENSE', is present in my HTML table and then change the background color of that line to red? https://i.sstatic.net/Yq7qF.png This is what I am looking for: $("#colorline").click( ...

javascripthtmlcss

Is there a way to access a private table in Google BigQuery using a Python script without needing an authorization token?

Is there a way to submit a query into Google's BigQuery and retrieve results from a python script without needing an authorization code for private tables? The python script is accessed through a user-friendly webpage, so manual authorization code han ...

pythonhtmlsqlgoogle-bigquery

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

javascripthtmljquery

Creating multiple Google markers based on addresses retrieved from a database using PHP

I have a requirement to display multiple Google markers on a map based on addresses stored in a database. I have already successfully loaded an XML file to retrieve latitude and longitude coordinates, but now I need assistance on how to create multiple m ...

phpjqueryhtmljsongoogle-maps

Error: The function $.simpleTicker is not defined

Every time I try to call a jQuery function, an error shows up: Uncaught TypeError: $.simpleTicker is not a function I attempted changing $ to jQuery but it didn't resolve the issue. This represents my jQuery code: (function ($) { 'use ...

javascriptjqueryhtml

Challenge with maintaining tab view data in Openui5

I am facing an issue with my application's tabs. Each tab renders data retrieved through ajax calls from the database. However, whenever I switch between tabs, the data gets refreshed each time. Is there a way to prevent this refreshing behavior and i ...

javascriptjqueryhtmlsapui5

Using the jQuery POST method to execute a redirect upon successful completion

I am attempting to utilize jQuery to create a post method. I have implemented it within a form and used bootstravalidator for validation. Once the form is successfully validated, it is posted and the PHP code comes into action. Now, my goal is to redirect ...

phpjqueryhtmlformsbootstrapvalidator