Tips for filling the offset space with a column

Having a bit of trouble phrasing my question, but here's the issue I'm facing:

Currently, I need to develop two different views, the first being the mobile view

However, I'm experiencing some difficulties with the second view, which can be seen here

My goal is to have the first and last columns fill the remaining height of the view.

Below is a snippet of my code:

<div class="row">
    <div class="col-2 col-md-2" style="background-color: aqua;">content</div>
    <div class="col-10 col-md-6" style="background-color: yellow;">title</div>
    <div class="col-12 col-md-6 offset-md-2" style="background-color: red;">description</div>
    <div class="col-12 col-md-4" style="background-color: rebeccapurple;">price</div>
</div>
htmlcssbootstrap-4flexboxgrid

Answer №1

Issue arises when the boostrap line consists of 12 columns. On a medium-sized screen (col-md), the first column (co) occupies 2 columns and the second one (titulo) occupies 6 columns. This means that the first two columns already use up 8 out of the 12 available columns on a line. Since the third column (Descr) utilizes 6 columns, it cannot fit on the first line due to the first three elements taking up more than the allotted 12 columns.

To resolve this, you will need to resize your columns. If you want all of them to be on one line, for example, the total sum of all your columns should not exceed 12.

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

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO If you are interested in the resizing of white divs, check out this link: Resizing of White divs The draggable divs are represented by red while the static divs are shown in white and located in droppabl ...

javascriptjqueryhtmlcssjquery-ui

Is it possible to create an HTML textarea that supports HTML formatting?

Is it possible to have HTML tag support in an HTML textarea within a form, similar to what is seen on Stack Overflow when asking a question? I would like to be able to capture the user's input in a textarea using PHP and print exactly what the user ty ...

phphtmltextarea

Adjusting color of fixed offcanvas navbar to become transparent while scrolling

After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down. The issue is that when scrolling, the box-shadow at the bottom of the navbar changes inste ...

javascripthtmlcssbootstrap-5

Why is Bootstrap 4 causing these columns to stack vertically instead of horizontally?

After upgrading to bootstrap 4, I noticed that my gallery layout has changed from horizontal in bootstrap 3 to vertical. What could have caused this sudden change? To see the issue, here is a link to a fiddle. Here are my column settings: <div class= ...

csstwitter-bootstrapbootstrap-4

Strategies for Resolving the IE 8 Issue with Table Row Background Images

Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8. In short, when you add a background image to a table row, the background is showing up in all the inner cells as well. ...

cssdebugginginternet-explorer-8background-imagecss-tables

Issues with JQuery Ajax rendering in browser (suspected)

I'm encountering an issue on my webpage. I have a div with two hidden fields containing values of 0 and 2, respectively. Upon clicking a button that triggers an AJAX query, the div contents are updated with hidden field values of 1 and 2. However, it ...

javascriptjqueryhtmlajaxdom

Say goodbye to <!DOCTYPE html> when using htmlAgilityPack

I'm currently developing an app for WP 8.1, and one of the tasks I need to accomplish is parsing a webpage with the following structure: <!DOCTYPE html> <html> <body> <table cellspacing="0" cellpadding="0" border="0" style="b ...

c#htmldomhtml-agility-packwindows-phone-8.1

Having trouble with enter key input not triggering?

I have scoured various resources for answers to my query, including Stackoverflow. Unfortunately, none of the posts I came across have helped me resolve my issue with getting the enter key to work in my project for FreeCodeCamp on Codepen. When I press the ...

javascriptjqueryhtml

Applying Regular Expressions in Java to "convert" a CSS style into an HTML tag style

In my Java code, I have a String variable that contains HTML code like this: <span style="text-decoration: underline;">test</span> My goal is to convert it to look like this: <u>test</u> If the HTML code is like this: <span ...

javahtmlcssregex

Troubleshooting issues with Bootstrap Accordion functionality within a React environment

After copying and pasting the Accordion code directly from Bootstrap, I'm facing an issue where the style is not consistent and the functionality isn't working as expected. Snippet from About.js: import React, { useState } from 'react' ...

htmlreactjsbootstrap-4accordionbootstrap-accordion

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

I am facing an issue where I have a specific color key in my AppSettings for the company's brand color, which needs to be applied to a CSS class. The challenge is how to incorporate this key into my stylesheet. Is there a way to access the Configurati ...

c#cssasp.net-mvc

The styles in the CSS file are not behaving as expected

Having an issue with my CSS file for the Header.js module. Despite writing rules, only one style is applying. Can anyone help me identify the problem? Thanks in advance! Header.js component import React from 'react'; import '../../../asset/ ...

cssreactjs

Introduction to Flask with GAE (blank Firefox tab)

Recently, I completed the Getting Started with Flask on App Engine Standard Environment tutorial. If you are interested, you can find the source code here. During my testing using Firefox and Chrome, I noticed that both browsers did not render the HTML te ...

htmlpython-2.7google-app-enginefirefoxflask

The functionality of the disabled and checked options on the radio button seems to be malfunction

Within an Angular HTML document, I have a set of radio buttons that share common names. I am attempting to update their disabled and checked properties from a .ts file, but the changes are not taking effect. Here is the code snippet: let elements = docume ...

htmlcssangular

Toggle the visibility of a div depending on the user's selection

My HTML select element has a few options to choose from: <select class="form-control" data-val="true" data-val-number="The field CodeSetup must be a number." id="CodeSetup" name="CodeSetup"> <option selected="selected" value="0">AllCodes< ...

javascriptjqueryhtmlcss

Duplicate user scrolling input within a specified div container

I am attempting to recreate a horizontal scrolling effect on a div element that mirrors the input scroll. When the user scrolls along the input, I want the div element to scroll in sync. The issue I am encountering is specific to Chrome, where the input b ...

javascripthtmlcssgoogle-chromefirefox

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

What is the method for accessing HTML tag data within a script?

Looking for a way to extract a specific substring from a given string: var str = `<ul class="errorlist"><li>Enter a valid email address.</li></ul>`; Is there a method to extract the following substring? 'Enter a valid email ...

javascripthtml

Sort out the table using Javascript and then choose all the checkboxes

I'm struggling with a function in Javascript that will only check checkboxes on visible rows of an HTML table. The table has a checkbox on each row and is filtered based on a textbox above the table. The checkboxes in the table are named chkbuild, an ...

javascriptphphtmlfiltercheckbox