Column wrapping in Bootstrap is a powerful feature that allows for

Looking for a layout similar to this: https://i.sstatic.net/BTuED.png

  1. Need a responsive design using Bootstrap 3
  2. The purple block (col-sm-7) with a fixed height, but it can be optional
  3. The blue block (col-sm-5) with a variable height (not dynamic), and it's also optional
  4. Text at the bottom (green) should wrap around the purple and blue blocks, taking up the full width (col-sm-12)
  5. Blocks can have additional classes based on the presence of other blocks
  6. In mobile view, the blocks should be stacked:

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

Is it feasible to achieve this layout using Bootstrap markup and CSS? How can it be done?

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

Could not connect: AJAX Request denied?

I am currently hosting a Digital Ocean server that runs on a MEN stack composed of MongoDB, Express, and Node. The registration form can be accessed at: When attempting to choose an option from the dropdown menu, I encounter the following error message: G ...

Why Aren't Static Positioned Divs Aligning at the Parent's Top?

I am facing an issue where I have 3 divs with content inside them, and the two smaller ones are aligning at the bottom of the larger div. Despite no presence of margin or padding, this alignment mystery has left me puzzled. body { width: 100% } .cont ...

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray? Check out this demo of a select box I am aiming to alter the highlight color to gray, can someone help me achieve this? select { border: 0; color: #EEE; background: transparen ...

When my contact form is viewed on mobile, an unexpected margin appears

On my main page, I have a contact form positioned on top of an image slider that appears like this: https://i.sstatic.net/aGnj1.png The contact form is nested inside the slider's div as shown below: <div class="img-slide"> <div c ...

View content from a text file on a webpage

Hi everyone, I could really use some assistance with a project I'm currently working on. As someone who is new to programming, I am facing a challenge. My goal is to showcase the contents of a plain text file on a webpage. This text file, titled titl ...

Submit a form using AJAX validation with either jQuery or vanilla JavaScript

As a .NET coder with little (no) front-end experience, I must apologize upfront. Upon clicking Submit, the form should trigger a call to a REST service. If the service response is true, a warning about a duplicate entry should be displayed, and the user s ...

Dragging down on an iPhone screen is a feature supported by the Framework7 Cordova platform

I am currently utilizing Framework7 and Cordova wrapper for my IOS application and I am facing an issue with the dragging effect in my content. Even after attempting to disable the pull-to-refresh effect from the Cordova side, the content remains draggabl ...

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within ...

What are the steps to designing an overlay using CSS?

Looking to generate a div with a custom size and then place something on top of it. How can I accurately position and resize the overlay to match the underlying div using CSS? ...

Adding a class to unhovered elements with jQuery/JS: a step-by-step guide

I have a variety of elements that are almost working how I want them to. There are four divs in total. Depending on the URL visited, I want a specific div to be fully transparent/active. The next div in line should animate in and out of transparency simul ...

Validation of HTML5 forms for AJAX button submission

I am working with a form that utilizes the new HTML5 form validation feature, which I find to be beneficial. However, I do not like how pressing the button causes the page to refresh (form submit). Instead, I would like to use AJAX to update specific page ...

What is the best way to combine two rows in a data table?

As I progress with my endeavor to construct a user-friendly transition matrix in R, following up on the previous post regarding adding a vertical line to the first column header in a data table, I am faced with a new challenge. Upon executing the provided ...

refresh shopping cart page when coupons are added or removed in woocommerce

Is there a way to prevent ajax reloading for coupons on the cart page in woocommerce when adding or removing them? I'd like this to be done with a manual page refresh. Any tips on how to achieve this would be greatly appreciated. Thank you! ...

Having trouble finding the dropdown generated by the jQuery plugin

In the process of developing an automation test script using C# and Selenium WebDriver, I encountered a challenge where I needed to click on two dropdowns consecutively. The HTML source code for the two dropdown elements is as follows: <select id="Ser ...

Alter jquery on mouse click

Hello, I am currently in the process of creating an online photo album. The concept involves displaying a picture with two elements that have onclick events to navigate to the next and previous images in the album. I have written a function for this purp ...

Determine the id value by selecting spans within a div using jquery

I am looking to extract the id value from the spans. Many thanks, Jean ...

The occurrence of an error is triggered by the Jquery.ajax()

Here's a useful link for you to try out: If you take a closer look, you'll see that it takes the $_GET['fname'] parameter and outputs the content I need. I made an attempt at solving this: $.ajax({ type: 'GET', url: ...

How can you choose an element by referencing data within one of its child elements?

If I have these two divs: <div class="foo"><div class="bar" data-stuff="1"></div></div> <div class="foo"><div class="bar" data-stuff="2"></div></div> How can I target the div with the class foo when provide ...

Issue arises when applying both overflow-x:scroll and justify-content:center

Encountering a problem with using overflow-x: scroll and justify-content: center on a flex parent container. Here is my code snippet: The issue: the first flex child item is not visible as it is cropped on the left side. Please refer to the screenshot and ...