"Utilize Boostrap's responsive columns feature to optimize targeting within your

Is it possible to create a table with rows that adjust their size based on the screen size? For example, 3 elements for large screens, 4 for medium screens, and 2 for small screens.

Below is the code I used to achieve this:

<div class=row>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
      <p>MY ELEMENT</p>
   </div>
</div>

Now, I want each element to target another collapsible .col-12 div. The challenge lies in having these elements fill the entire column and display correctly in the green area. On larger screens, there should be 3 targeted divs, on medium screens 4, and on smaller screens just 2.

Take a look at my sketch to better understand:

https://i.sstatic.net/Y6cNk.png

The issue I'm facing is that when I add an element below my col-* divs, the other columns shift down under those added elements.

    <div class=row>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          <p>MY ELEMENT</p>
        </div>
        <div class="col-12 collapse bg-success" id="collapseExample" >
          <p>COLLAPSE ELEMENT</p>
      </div>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
          <p>MY ELEMENT</p>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
          <p>MY ELEMENT</p>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-6 bg-danger">
          <p>MY ELEMENT</p>
        </div>
    </div>

https://i.sstatic.net/Bjd2E.png

How can I ensure that my green div displays without causing the other columns to go underneath it?

Here is a code snippet for reference.

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Answer №1

If you're looking for a solution, I recommend creating a JavaScript function to handle this task. You can manage the addition and removal of elements using JavaScript functions like .append() or .appendChild(), and .remove().

There are various approaches you could take to implement these solutions:

  • Create an empty <div> and use .append() to add your complete col-12 bg-success to the element (make sure to give the col an id when dynamically adding it, as you will need it later for .remove())
  • The appendChild() method lets you append a node to the end of the child nodes list of a specified parent node, in your case, the bg-danger divs.

I hope this guidance helps you move forward. Feel free to reach out if you encounter any more challenges.

EDIT:

Here is an example based on the first suggestion:

<div class=row>
   <div class="col-lg-4 col-md-3 col-sm-6 bg-danger" href="#collapseExample" role="button" aria-expanded="false">
      <p>MY ELEMENT</p>
   </div>
   <div id="collapseExample">
      {{--new col-12--}}
   </div>
  ...
</div>

let div = document.createElement("div");
    div.addClass("col-12");
    div.addClass("bg-success");
    div.setAttribute("id", "collapseChild");
    div.innerHTML('<p>COLLAPSE ELEMENT</p>');
    document.getElementById("collapseExample").append(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

Is the top bar feature malfunctioning in version 4.3.2 of Foundation?

During my previous project, I utilized the open-source Foundation 4 framework and successfully implemented a top bar navigation. Now, as I embark on a new project with Foundation, I have downloaded the Foundation 4.3.2 version from . Despite referencing th ...

javascripthtmlcsszurb-foundation

Ways to continuously monitor a div for a specific class

Is there a way to continuously check if an area has the class "top-nav" in order for the alerts to work every time it lacks or contains the class? How can I achieve this functionality? Check out the code on jsfiddle: https://jsfiddle.net/jzhang172/117mg0y ...

javascriptjqueryhtmlcss

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

After creating two JavaScript functions, I am eager to utilize both of them upon pressing the submit button on my form. The first function is already integrated into the submit button and activates a paragraph display upon submission. Now, I intend to sh ...

javascriptcsshtml

I'm experiencing an issue where the submit button on my HTML form is not successfully recording my information

Welcome and thank you for taking the time to read this. I am facing an issue while setting up a login system. For styling purposes, I had to create two separate forms: one for Email and Password, and another for the submit button. Unfortunately, because ...

phphtmlsql

Send attributes to BoundField.as_widget() in Django

Is it possible to pass HTML attributes using BoundField.as_widget() by specifying them in the attrs parameter? According to the Django documentation, this method works as follows: BoundField.as_widget(widget=None, attrs=None, only_initial=False)¶ This fu ...

pythonhtmldjango

Optimize your HTML with Meleze.web's ASP.NET MVC 3 Razor minification and compression features

I came across meleze.web on NuGet, which claims to remove extra white spaces in generated HTML results. However, after adding the necessary configuration to my web.config file and running the application, I have not seen any changes in the result. Are th ...

asp.nethtmlasp.net-mvc-3razorminify

What caused the auto resize feature of the Automatic Image Montage jQuery plugin to malfunction?

Apologies in advance if my issue is a bit convoluted. I've integrated the Automatic Image Montage jQuery plugin into a page I'm currently working on. However, I seem to have disrupted the functionality that automatically resizes images when the w ...

javascriptjqueryhtmlcssimage-gallery

What causes a span with absolute positioning to not be correctly positioned within a span with relative positioning in Firefox, unless it is displayed as inline-block or similar?

Can you explain why the code below doesn't display correctly in Firefox unless the parent span is set to display as inline-block? When inspecting the layout of the absolutely positioned span, it shows the number 184 instead of 197 on the right side. A ...

htmlcssfirefoxabsolute

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

javascriptajaxhtml

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

htmlcsstwitter-bootstrapbootstrap-5

Troubleshooting a Messaging Error between Background and Another Script

Attempting to transfer selected text from the current page to an HTML page using message passing: content script to background script, then background script to the HTML page. However, encountering errors if the HTML page is not already open, and even gett ...

javascripthtmlgoogle-chrome-extensionfrontendmessaging

"Employing the ScrollSpy feature in Bootstrap allows you to effortlessly monitor

Recently, I came across a document containing Bootstrap 4 code like the following: <div className="container"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand active" aria-current="true" href="/"> ...

javascriptcssbootstrap-4scrollspy

Struggling to create a 3x4 grid using Bootstrap - any tips?

I am attempting to design a grid layout for displaying 12 images in a squared items format. My initial idea was to create a grid with 4 rows and 3 columns, but I have been unsuccessful in my attempts so far. Despite searching for tutorials and guides, I ha ...

htmlbootstrap-4

The `border-border` class cannot be found. In the case that `border-border` is a personalized class, ensure that it is declared within a `@layer` directive

The border-borderclass is not recognized. Ifborder-borderis a custom class, ensure it is defined within a@layer directive. globals.css @tailwind base; @tailwind components; @tailwind utilities; @layer base { * { @apply border-border; //error } ...

cssreactjsnext.jstailwind-css

Transform the colors of rich text content to match dark mode, similar to the feature in MS

Seeking a solution to convert rich text content colors into dark mode without relying on the filter:invert(1) CSS option. Microsoft Outlook manages this conversion effectively, unlike the current method that turns magenta color into green in dark mode. Ou ...

javascripthtmlcssoutlookcolors

Discover the steps to download web page data using Objective-C while ensuring that JavaScript has finished executing

I attempted something similar: NSString *url = @"http://www.example.com"; NSURL *urlRequest = [NSURL URLWithString:url]; NSError *error = nil; NSString *htmlContent = [NSString stringWithContentsOfURL:urlrequest encoding:NSUTF8StringEncoding error:&e ...

javascripthtmlobjective-c

Can a CSS background gradient be created without specifying exact start and end positions?

Can CSS linear gradients have unanchored, independent start and end positions like in SVG gradients? Below is an example of CSS linear gradient code: #rectangle { width: 100%; height: 200px; position: absolute; top: 0; left: 0; background: ...

htmlcsssvglinear-gradients

Switch the hover effect to be activated by clicking

Recently, I discovered an incredible plugin created by the talented developer janko. It has been a fantastic addition to my project. The only issue I've encountered is that I do not want the default hover style. Is there a way to transform it into a ...

jqueryhtmlcsshoverdock

Determining the post_thumbnail's dimensions by force

How can I maintain a constant image size for post thumbnails on my website, regardless of the original image's dimensions? I attempted to achieve this using the following code: <?php if (has_post_thumbnail()) the_post_thumbnail(array(400, 200)); ...

phphtmlcsswordpress

Alert: A notification when navigating away from your site

Is there a way to notify users when they click on an external link that they are leaving your site? <div class="row"> <div class="col-lg-12"> <div class="form-group"> *If you need information on other applicable forms, you ...

javascriptjqueryhtml