Fluid container with fixed inner columns in Bootstrap

Is there a way in Bootstrap to have 2 columns within a non-fluid container?

.col-xs-9 / .col-xs-3

I am trying to make the backgrounds for these columns extend all the way to the left and right margins. I attempted the following example: http://codepen.io/iamandrewluca/pen/VmOJVJ, but using `width: 75vw;` and `width: 25vw;` did not provide the desired outcome. Any ideas on how to solve this issue?

Desired result:
* Orange - Container
* Green - Left Column
* Blue - Right Column
* Dark Green - Left Background
* Dark Blue - Right Background

One possible solution is to add the following to the CSS:

body {
    overflow: hidden;
}

This gives both columns a width of 100vw, but it causes the background image content to go beyond the edges.

Answer №1

To ensure your background images cover the entire screen, adjust the container's width to 100vw. Divide the left column to be 75vw and the right column to be 25vw within the container. This will effectively cover the whole screen with your background images.

Answer №2

Resolved by manually applying calculations to widths and margins for the first and last elements in the type. For example, check this out: https://codepen.io/iamandrewluca/full/zzWrXe/
I might consider creating a mixin to automate this process for all columns with offsets, pulls, pushes, and other adjustments.

UPDATE: Successfully transitioned to Bootstrap 4, addressing issues related to scrollable content

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

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

Change all instances of the asterisk character to a red color on every page using CSS styling

Is it possible to change the color of the asterisk that indicates required fields on all forms across my site without having to wrap it in a div or another wrapper? ...

ajax is not functioning properly on scrolling div

I recently created a 1 on 1 support chat using ajax and it's been working well. However, I've encountered an issue where the div expands indefinitely when refreshed by ajax and is taller than its original height. I've tried using overflow: a ...

Dealing with a problem in CSS Flexbox while aligning child elements using the `align-self`

Check out this test code here - https://jsfiddle.net/8dgeh9r3/1/ I have set up two scenarios to simulate. In the first scenario, there is a main parent flex container with multiple intermediary parents (which are also flex boxes that inherit properties fr ...

What is the best way to enable users to include additional choice information?

I have a dropdown list where the user can select an option, and based on their selection, specific form inputs are displayed. Here is the HTML code: <select id="relative" name="relative"> <option>Choose a relative</option> <o ...

What is the best way to anchor an image so that it remains fixed in its position relative to the browser or screen resolution?

I inquired about an issue a few days back, but I realize now that my explanation was unclear. To make things clearer, let me present two images to illustrate my problem. This is how it appears for me: . However, individuals with different screen resolution ...

javascript code to close slide div without hiding the setting icon upon clicking outside the div

Can you help me with an issue I am facing while implementing a slide div for creating theme color? The div works fine, but when I click outside of it, the div does not close. I have tried multiple solutions, but none seem to work. I have researched various ...

Looking to develop a swipeable card feature similar to Gmail using React JS (excluding React Native)?

Looking to replicate the swipe card functionality of Gmail in React Js, After creating the UI and implementing swiping using UseGeature, I am facing an issue with smooth animation when hiding or showing buttons using UseEffect. There is a 20px movement be ...

Combining multiple PNG images onto a base image in PHP

I need assistance in merging 24 images with single dashes highlighted into a base circle image using PHP GD, JS or CSS. All images are in PNG format. Your help would be greatly appreciated. ...

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

The dropdown list in angularjs is failing to populate with options

For populating a dropdownlist using angularjs, I attempted the following: var app = angular.module('App', []); app.controller('UserSelection', function ($scope, $location) { var User = this; User.onSelectChange = function () { i ...

Exploring the power of add() method in getStyleClass() along with some code snippets

Recently, I successfully created a custom button in JavaFX by tweaking the style of a simple button using the setStyle() method with different String parameters based on whether the button was clicked or not. I wanted to convert this customized button int ...

Creating images or PDFs from HTML with CSS filters: a guide

Looking for someone who has experience creating images or PDFs from HTML code. The HTML contains images with CSS filters such as sepia and grayscale. If you have worked on this type of project before, I would love to hear about your experience. <img cl ...

Display issue with loading animation

After clicking the button and seeing the alert message, I noticed that the loading animation does not display during the await new Promise(r => setTimeout(r, 2000));. /* script.js */ async function refreshStatus() { document.getElementById("load ...

The image slider script I've built is functioning perfectly in Codepen, but unfortunately, it's not working as

My image slider called Orbit is functioning properly on Codepen.io, however when I try to run the exact same code on Plunker, it doesn't work at all. <ul class="slider" data-orbit> <li> <img src="http://foundation.zurb.com/docs/a ...

Having trouble integrating Bootstrap into an Angular project

I'm facing an issue with adding Bootstrap to my Angular project. Despite following the necessary steps, I am unable to integrate it successfully and surprisingly, I'm not encountering any errors along the way. After browsing through solutions on ...

Navigate your way with Google Maps integrated in Bootstrap tabs

Trying to display a Google Map in a vanilla Bootstrap tab has been quite the challenge. I created a fiddle based on the Bootstrap docs, and followed Google's instructions for the Gmap script. The map object appears initialized when checking console.di ...

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

Simultaneously opening the second submenu and closing the previous submenu with a height transition results in the second submenu being positioned off-screen

Sample: https://codesandbox.io/p/sandbox/navbar-k2szsq (or refer to the code snippet below) In my navbar, I have implemented multiple submenus with a height transition when the user opens or closes a submenu. However, only one submenu can be open at a tim ...

Is there a way to create a transparent background for my website without affecting the visibility of the content such as images and text?

I'm currently working on a website for a school project, and I've run into a minor issue. I can't seem to make the background of the body transparent without affecting the content within it. Below is my HTML code: <html> <head> ...