Expansive Bootstrap division

I am seeking assistance in achieving a Bootstrap layout similar to the image provided below. My difficulty lies in ensuring that the yellow bar spans the full width of the Bootstrap container without disrupting the stacking order of columns on mobile view.

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

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

While I do not want the yellow bar to display on mobile view, it is crucial that the sequence in which the columns stack up remains intact. I have attempted inserting a div within the middle column and trying to extend it beyond, but my efforts have been unsuccessful (the closest result was achieved using negative margins, yet this approach led to overlap issues with other columns due to lack of precise margin values).

Below is a snippet of my HTML structure - the yellow bar part has been excluded as its placement eludes me...

<div class="col-md-4">
    col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
    col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
    col 3 header<br/>col 3 contents
</div>

If anyone could provide guidance on whether this can be accomplished with Bootstrap and offer some insights, it would be greatly appreciated.

htmlcsstwitter-bootstrapresponsive-design

Answer №1

When the column headers and a yellow div have a fixed height, you can create a margin between the header and content, then position the yellow div absolutely between them.

Answer №2

Utilizing Bootstrap classes designed for adjusting column layouts on various devices could be beneficial.

Simply replace lg with xs and check out this resource: Bootstrap 3: pull-right for col-lg only

To hide the yellow div, you can utilize .hidden-xs.

You have the option to use col-xs-pull-6 or col-xs-pull-12 to adjust your content layout accordingly.

If you provided your code in the question, I could have easily resolved the issue for you.

Answer №3

Flexbox is a better alternative to Bootstrap for achieving the desired layout effects. By reordering the divs, you can easily create a responsive design without running into the common issues faced with Bootstrap columns. Check out this solution below:

*{
  box-sizing: border-box;
}

.wrapper div {
  border-width: 2px;
  border-style: solid;
  padding: 5px;
}

.wrapper div:nth-child(1),
.wrapper div:nth-child(2) {
  border-color: red;
}

.wrapper div:nth-child(3),
.wrapper div:nth-child(4) {
  border-color: blue;
}

.wrapper div:nth-child(5),
.wrapper div:nth-child(6) {
  border-color: green;
}

.wrapper .yellow {
  display: none;
}

@media (min-width:768px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .wrapper div {
    flex: 1 1 33%;
  }
  .wrapper div:nth-child(1) {
    order: 1;
  }
  .wrapper div:nth-child(2) {
    order: 5;
  }
  .wrapper div:nth-child(3) {
    order: 2;
  }
  .wrapper div:nth-child(4) {
    order: 6;
  }
  .wrapper div:nth-child(5) {
    order: 3;
  }
  .wrapper div:nth-child(6) {
    order: 7;
  }
  .wrapper .yellow {
    display: block;
    border-color: yellow;
    order: 3;
    flex: 0 0 100%;
    text-align: center;
  }
}
<div class="wrapper">
  <div>col 1 header</div>
  <div>col 1 contents</div>

  <div>col 2 header</div>
  <div>col 2 contents</div>

  <div>col 3 header</div>
  <div>col 3 contents</div>

  <div class="yellow">div with full width</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

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

I am facing an issue with my responsive menus on a webpage, similar to the example provided in the jsfiddle link below. Currently, when one menu is open and I click on another, both remain open. How can I modify the JavaScript code so that when one menu op ...

javascriptjquerycssresponsive-design

Reverse the impact of the preceding CSS directive

In this screenshot example, the padding at the bottom in Material-UI has been increased from 16px to 24px using the CSS rule below: .MuiCardContent-root:last-child { padding-bottom: 24px; } https://i.sstatic.net/IWaIu.png I want to revert it back to ...

cssreactjsmaterial-ui

Ways to stop Bootstrap collapse from displaying depending on a certain condition in bs5 framework

I've been struggling to figure out how to prevent a collapsible panel from opening or showing if a specific value is null. Despite multiple attempts, I haven't had any success. HTML <a href="#" data-bs-toggle="collapse" da ...

javascripttwitter-bootstrapbootstrap-5collapsable

Submitting a jQuery Userlike form will not result in a page change

I'm facing a challenge with posting a form without the page refreshing. Despite various suggestions on SO, none of the methods seem to work for my specific case. The use of jQuery's ajax or post APIs is not an option as they change the encoding ...

jqueryhtmlajaxformsencoding

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

javascripthtml

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

Obtain the final output of a specific class utilizing jQuery

My HTML table structure is as follows: <tbody id="letter-list"> <?php $index = 0; foreach($letters as $letter) { $index++; ?> <tr id="letter-<?php echo $index; ?>"> <td><?php echo $l ...

phpjqueryhtml

Ensuring the dropdown menu's functionality in AngularJS

I'm currently working on a code snippet that validates when the user moves away from a specific select element. The goal is to change the border color of the select element to either red or green only when the user tabs away from it or moves the mouse ...

javascripthtmlangularjsvalidationselect

Create a dynamic dropbox using JavaScript/JQuery in an HTML page

I am currently working on implementing 3 different drop down boxes that are triggered by 4 different buttons. These drop down boxes should appear within the #apple div. When Button B1 is clicked, the drop down options include Apple, Mango, and Papaya. Whe ...

javascriptjqueryhtmldrop-down-menu

Prevent span/button clicks by graying them out and disabling the ability to click using HTML and JQuery

I am facing a challenge with my two spans that reveal specific information when clicked. I want to make one span appear as a disabled button (greyed out) when the other span is clicked. I tried using $("#toggle-odd").attr("disabled", tr ...

javascripthtmljquerybootstrap-5

What is the best way to access a local variable within a POST method in Node.js?

Below are some of the modules that I have utilized: const mysql = require('mysql'); const express = require('express'); const session = require('express-session'); const path = require('path'); const bodyParser = req ...

htmlnode.jsexpressejs

Showing a property only as you scroll through the page

Seeking assistance on creating a scrolling effect for a box shadow property using HTML, CSS, and JS. The goal is to have the shadow appear with a subtle transition while scrolling and then disappear when scrolling stops. Here's the code I've be ...

javascripthtmlcss

Can someone show me how to populate select options with values from a list using Python variables?

Instead of hardcoding values in my HTML file, I have a variable called 'myVariable' in my Python file that is a list. I want to use this variable to generate the options in my select menu. <select class="form-select" aria-label=" ...

pythonhtmlflaskbootstrap-5

Upon returning to the website homepage from another page, the JavaScript animation ceases

I implemented a unique typewriter animation on my homepage by utilizing code from this source and making minor HTML edits to customize the content. https://codepen.io/hi-im-si/pen/DHoup. <h5> <body>Hello! I am Jane.</body> < ...

javascripthtmlcssanimation

Trying to locate the subsequent div element following the current one

Here is an example of some HTML code: <div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 8 1 start top><strong>CRED ...

javahtmlseleniumxpathselenium-webdriver

"Emphasizing the Html.ActionLink menu for improved user navigation and

Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS. Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I ...

javascriptjquerycss

The "a" HTML link element is stubbornly resisting being attached to an event listener

I have implemented the MutationObserver observer in my program to monitor the addition of elements. One specific condition I am checking for is if the added element is an anchor tag (tag="a") and if the link is a DOI, then I attach a contextmenu ...

javascripthtmldom-eventsmouseeventwebview2

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

javascriptphphtmlcssjoomla

Displaying feedback messages and redirecting in Flask may result in the response being visible in the developer tools, but

Just starting out with Flask and encountering an issue. I am trying to determine if a response is empty, and if it is, display a message. The problem lies in the fact that even though the redirect works and the subsequent GET request returns the correct HT ...

pythonhtmlajaxflask

Harness the power of Ionic by utilizing the same HTML template across various pages, while easily customizing the content

I need help with streamlining my Ionic app that has multiple pages with similar HTML structures but different content. Is there a way to use just one HTML file and dynamically fill in the content? Should I use a controller for each page, or is there a more ...

javascripthtmlangularjsionic-framework