Utilizing Bootstrap for Content Width as Opposed to Full Screen Width

I am currently utilizing Bootstrap 4, but I prefer not to rely on the screen width for my layout. Instead, I want it to adapt based on the width of a specific container.

Despite my efforts in searching for a solution, I have been unable to find the necessary details.

The codes provided are designed to adjust based on the screen width, but I am seeking a way for them to conform to the current width of the specified container.


<div class="row">

<div class="col-lg-4">

SIDEBAR

</div>

<div class="col-lg-8">

<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>

</div>

</div>
htmlcssbootstrap-4

Answer №1

Your requirements are not entirely clear, but it appears that you are looking for a boxed layout instead of a fluid one. To achieve this effect, you can utilize the .container class.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-xl-4">Column</div>
        <div class="col-lg-3 col-xl-4">Column</div>
    </div>
</div>

For more information, refer to the documentation: https://getbootstrap.com/docs/4.0/layout/overview/

If this solution does not meet your needs, please provide further clarification on your desired outcome.

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

Adjust the height of the container to accommodate responsive images automatically

Hello, I am trying to make the container height adjust automatically based on the responsive image it contains. The container's display is set to flex and the image is positioned between two divs with the class "text-block". These divs have a width of ...

javascripthtmlcss

Why does my text keep aligning to the left when I adjust the width, causing my background to remain attached to the text?

When I add a width attribute to my #information h1 id, it seems to override the text-align: center; property and aligns the text/background to the left instead of center. Basically, I need assistance in centering the headers with the appropriate backgroun ...

htmlcsscentering

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

javascriptjqueryhtmlcss

Expanding the size of one div causes the surrounding divs to shift positions

I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...

javascripthtmlcss

Angular is having trouble with the toggle menu button in the Bootstrap template

I recently integrated this template into my Angular project, which you can view at [. I copied the entire template code into my home.component.html file; everything seems to be working fine as the CSS is loading correctly and the layout matches the origina ...

javascripthtmlangulartypescript

Exiting the modal/popup box is currently disabled

I am struggling to figure out why the modal box/pop up is not closing when I click 'x'. It seems completely unresponsive. Check out the JavaScript code below: var kite = document.getElementById("poptext"); var kitetwo = document.getElementById( ...

javascripthtmlcss

Is it possible for Javascript to fetch a sound from the server once and then duplicate it across n different objects when loaded multiple times?

Incorporating Javascript into my work is crucial. Here's an example: sound = []; for (var i = 0; i < 20; i ++) sound[i] = new Audio("source.wav"); My concern is whether the sound will be retrieved from the server 20 times, or just once. I a ...

javascripthtmlbrowserloading

Displaying content in Bootstrap 5 modal with jQuery may cause a delay in the appearance of a centered spinner before the content loads

In my Bootstrap 5 modal, I have implemented specific functionality in jQuery where a centered spinner is supposed to show up in the modal before loading the content. You can see a live example of this here. The issue I am facing is that the spinner takes ...

javascriptjquerycssbootstrap-5

How can I showcase API information on a website with the help of Node.js?

Hello everyone, I'm a beginner at creating websites and I am eager to explore nodejs. Currently, I am utilizing an API to retrieve data in node: request(options, function (error, response, body) { if (error) throw new Error(error); console.log(b ...

node.jsapihtml

Contrasting the addition of an onClick listener through Jquery versus utilizing an HTML onclick attribute

I found this interesting piece of code that I want to share with you all: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.12.4.js"></script> <title> HelloWorld JQuery </t ...

javascriptjqueryhtmlevent-handling

Dimensions of image details

I am working on an article that includes an image with a description. The challenge is that the description should not exceed the width of the image, but since the image width varies, fixing the width with a class .article-image is not a viable solution. ...

htmlcss

Design the button element with input text using CSS styling

https://i.sstatic.net/3vdRV.png Is there a way to stylize input text and buttons similar to this using CSS or Vuetify JS? ...

cssbootstrap-4vuetify.js

How come my Bootstrap container columns are not remaining evenly divided into four parts?

Struggling to split a section of my project into 4 equal parts using the bootstrap col attribute. Unfortunately, every time I try, the last container ends up breaking and shifting below the other 3, creating an unsightly code layout. index.html <sec ...

htmlcssbootstrap-5

Unable to display a Google map within a webview when viewing a local HTML file

I am currently working with a local HTML file called basicmap.html that includes the following code: <!DOCTYPE html> <html> <head> </head> <body> <div id="map"></div> <script> ...

javascripthtmliosobjective-cgoogle-maps-api-3

Issue with Jquery .html() not adding content

Utilizing Jquery to dynamically update a list based on dropdown selections. After successfully fetching data and constructing the correct HTML content within the "item" variable, applying .html(item) does not result in the expected HTML updates. <div c ...

jqueryhtml

Access a document by selecting a particular page from a designated anchor tag

Seeking assistance from the community on opening a particular page within a file using an anchor tag (<a href=""></a>). The issue arises when trying to pass a parameter through the xls file, as it prevents locating the specified page. Any gui ...

htmlexcelpdfanchor

Controlling the Flow of Events in JavaScript Documents

Explore the integration of two interconnected Javascript files and delve into managing event propagation between them effectively. 1st js file var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; var ...

javascriptjqueryhtml

If a box in the grid contains a certain class, then JavaScript should be

I've set up a grid featuring a player, represented by a yellow box, along with obstacles denoted by black boxes marked with the .ob class. I want to prevent the player from moving into these obstacle squares when the 'UP' button is clicked. ...

javascriptjquerycss

What is the best way to update the innerHTML of a date input to reflect the current value entered by the user?

Currently, my task involves extracting data from a table by obtaining the innerHTML of each row. The table contains date inputs that can be manually adjusted or generated automatically. However, the innerHTML does not update accordingly. Thus, when exporti ...

javascripthtmljquery

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner