Navigating the ins and outs of Bootstrap 4 grids

I am trying to create a layout with two columns, each using the class col-md-6. In both columns, there are six images. However, I want to have only one image displayed in the left column if the right column is empty. How can I achieve this?

The current setup works fine, but when the right side image is missing, I want the left column to expand to full width. Is there a way to handle this scenario?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="row">
                <div class="col-4" style="background-color:yellow;">img</div>
                <div class="col-4" style="background-color:orange;">img</div>
                <div class="col-4" style="background-color:blue;">img</div>
                <div class="col-4" style="background-color:red;">img</div>
                <div class="col-4" style="background-color:lime;">img</div>
                <div class="col-4" style="background-color:indianred;">img</div>
            </div>
        </div>
        <div class="col-6 p-0">
            <div class="col-12" style="background-color:green; height:48px;">img</div>
        </div>
    </div>
</div>

If the right column (col-md-6) is not available, I want the layout to look like the code below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-2" style="background-color:yellow;">img</div>
                <div class="col-2" style="background-color:orange;">img</div>
                <div class="col-2" style="background-color:blue;">img</div>
                <div class="col-2" style="background-color:red;">img</div>
                <div class="col-2" style="background-color:lime;">img</div>
                <div class="col-2" style="background-color:indianred;">img</div>
            </div>
        </div>
    </div>
</div>

How can I adjust my layout to handle this situation effectively?

javascripthtmlcssbootstrap-4

Answer №1

Switch col-6 to col

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
    <div class="col">
    <div class="row">
      <div class="col" style="background-color:yellow;">img</div>
      <div class="col" style="background-color:orange;">img</div>
      <div class="col" style="background-color:blue;">img</div>
      <div class="col" style="background-color:red;">img</div>
      <div class="col" style="background-color:lime;">img</div>
      <div class="col" style="background-color:indianred;">img</div>
    </div>
      </div>
          <div class="col p-0">
      <div class="col-12" style="background-color:green; height:48px;">img</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

The CORS middleware functions properly with app.get requests, but encounters issues with app.post requests

When utilizing the code snippets below: SERVER: const cors = require('cors') const mongoose = require('mongoose'); const Pet = mongoose.model('pets'); const corsOptions = { origin: 'http://localhost:3000'} app.get ...

javascriptnode.jsexpresshttpcors

What is the best way to refresh a jQuery slideshow using a jQuery show/hide event?

I am currently using jQuery to toggle the visibility of div elements on a webpage. Each div contains a jQuery slideshow. The first one functions correctly, but when navigating to the next div, the slideshow breaks (view here: ). I have been advised that I ...

javascriptjqueryhtmlbxslider

Tips for modifying a biography with PHP

I'm working on a feature that allows users to edit their biography. I want the text stored in the database to show up in the text box, rather than just as a placeholder. How can I achieve this? Currently, the text is set as a placeholder, but my goal ...

phphtml

Have you ever wondered how the automatic video play on scroll feature works on Tiktok.com and YouTube shorts when using a mobile device?

My goal with React JS is to develop a website similar to Tiktok, where the video below will automatically play with sound as the user scrolls down. I attempted to set this up using window.addEventListener("scroll",...), but after looking into it further, ...

javascripthtmlcssreactjs

Ways to dynamically incorporate media queries into an HTML element

Looking to make some elements on a website more flexible with media rules. I want a toolbar to open when clicking an element, allowing me to change CSS styles for specific media rules. Initially thought about using inline style, but it turns out media rul ...

javascriptphpjquerycss

Angular Square Grid Design

Attempting to create a square grid layout using CSS for ng-repeat items. Essentially, I am looking to have one big square followed by four smaller squares that combined have the same width and height as the big square. Here is my CSS: .container{ widt ...

javascripthtmlcssangularjs

Utilizing jQuery in your webpack configuration for optimal performance

I encountered some issues while trying to test a simple project that involves using a jQuery function with webpack. The errors occurred during the bundling process and are as follows: ERROR in ./~/jQuery/lib/node-jquery.js Module not found: Error: Cannot ...

javascriptjquerynpmwebpack

Why does jQuery utilize the anonymous function wrapper?

When delving into jQuery's code structure, one notices that it begins by enveloping all of its code within an anonymous function: (function ( window, undefined) { /* ...jquery code... */ }) (window); It is clear that this function is immedi ...

javascriptjquery

Counting the number of times a form is submitted using a submit button and storing the data

After researching for a few hours, I've gathered information on different techniques for storing data related to a submit button counter in a text file. <form action="/enquiry.php" method="post" name="form"> <label>Name *</label> &l ...

javascriptphpjquery

Choosing the nearest element among the options

I am facing an issue with selecting the closest element using jQuery. Here is my HTML: <table> <tbody> <tr> <td> <span class="control"><img class="doAction"></span> ...

javascriptjquery

The event handler for clicking on the inner <li> element is not being triggered

I am encountering an issue in my React project, The problem lies within a menu structure that contains nested sub-menus. Here is the snippet of code: <ul id="main-menu-navigation" data-menu="menu-navigation" ...

javascriptjqueryreactjs

Can you explain the purpose of the .col-form-label class in Bootstrap and how it affects labels?

Here in the initial label, the class is specifically identified. <form> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Email Address</label> <div ...

htmlnode.jsbootstrap-4frontendreact-fullstack

Utilizing the NuxtJS framework to tap into video camera functionalities

I am completely new to Vue and NuxtJs. My goal is to create a webcam feature using NuxtJs, but I have encountered some challenges. <template> <div class="photobooth"> <div class="controls"> <button @click="takePhoto">Ta ...

javascripthtmlvue.jsnuxt.js

Prevent further triggering of the .click function when the user clicks repeatedly

Is there a way to prevent the .click function from executing if the user clicks too many times? This is my current code: $('button').click(function() { $('#bg').fadeToggle('200'); }); Check out the jsfiddle DEMO ...

javascriptclick

Troubleshooting: The Jquery each loop is malfunctioning

I am new to using jquery and I have encountered a problem in my project. I am attempting to iterate through all the links within the #rate_box and attach a click event to them. This click event is supposed to send data to an external php script, then remov ...

javascriptjqueryajaxbind

hiding the search box by clicking away from it

Can someone help me with modifying this search box design? @import url(http://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; color: #C0C0C0; } * { margin: 0px; pad ...

javascriptcss

Error: Attempting to change a read-only property "value"

I am attempting to update the input value, but I keep receiving this error message: TypeError: "setting getter-only property "value" I have created a function in Angular to try and modify the value: modifyValue(searchCenter, centerId){ searchCenter.va ...

htmlnode.jsangulartypescript

Utilizing the ref received from the Composition API within the Options API

My current approach involves utilizing a setup() method to bring in an external component that exclusively supports the Options API. Once I have imported this component, I need to set it up using the Options API data. The challenge I face is accessing the ...

javascriptvue.jsvuejs3vue-composition-api

Modifying the appearance of a WordPress website with CSS styling

I am currently using WordPress and I am excited about making changes to the CSS style sheet. After visiting , I realized that there is no option for editing the 'CSS' under Appearance → Customize → 'CSS'. My usual process is going ...

csswordpress

What methods can I use in JavaScript to convert a string into a hash, and then retrieve the original string from

I need to find a way to include a very long string (~70,000 characters) in a URL. It is important for me to have the ability to implement back-forward functionality in a browser so that my application can respond and adjust its state when the URL changes. ...

javascriptstringhashhashcode