Prevent sidebar from adjusting size according to text length

Just started exploring Bootstrap 5 and noticed some significant differences from version 4.

Check out this jsfiddle for a demonstration of my issue.

The problem occurs when the lorem ipsum text exceeds a certain length, causing the sidebar width to be pushed to the left instead of the text being moved down within the card.

For instance, using a shorter text length like:

<div class="alert alert-info m-2">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

will display the correct sidebar width.

I find it confusing why this happens. I prefer not to have the sidebar resize itself based on text length as it seems counterintuitive.

cssbootstrap-5

Answer №1

It always happens that you discover the answer on your own right after seeking help... sigh

.primary-sidebar {
    width: var(--main-sidebar-width);
    display: flex;
    justify-content: space-between;
}

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

"Troubleshooting problem with padding-right in Internet Explorer when displaying background image within

Encountering a problem with the IE browser (all versions up to IE 10). Here's the issue. The text in the input box is overlapping its background image. Unable to place this image in the parent div due to the dynamic nature of the input box and other ...

htmlcssinternet-explorerinput

Creating a NgFor loop in Angular 8 to display a dropdown menu styled using Material

I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside. <p>User ...

cssangulardropdownmaterializeangular-materialize

PHP incorporate diverse files from various subfolders located within the main directory

My question is similar to PHP include file strategy needed. I have the following folder structure: /root/pages.php /root/articles/pages.php /root/includes/include_files.php /root/img/images.jpg All pages in the "/root" and "/root/art ...

phphtmlcssimageinclude

Enhanced auto-zoom feature with orientation change for iOS 7

My web page was functioning perfectly until the release of iOS 7 by Apple today, causing the layout to break when the screen orientation is changed. When focusing on a text area and rotating the screen to landscape view, the entire page zooms in. However, ...

htmliphonecssmobileios7

Navigate through photos (jQuery) to adjust size and location dynamically (CSS)

Currently, I am in the process of developing a jQuery script that will automatically adjust the size and position of image elements upon page load or resize. To structure my layout, I am utilizing Bootstrap and have set a fixed height using CSS. It is wort ...

jqueryhtmlcsstwitter-bootstrap

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

javascripthtmlcss

Why is it that lists always begin outside of the enclosing element?

I've always found this incredibly frustrating. Why do lists behave this way? When you set the margin and padding to 0, you would expect them to align normally with the surrounding text on the left, right? But no. That's where the text within the ...

htmlcsshtml-lists

Solid white border encasing the full page

While I know there have been similar questions asked before, I believe mine is unique because I haven't found a solution anywhere. Recently, I started a new project in React. I decided to remove App.css and index.css, and created a single component wh ...

htmlcssreactjsstyled-components

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

javascripthtmlcssvue.js

This is an alignment of the background image ('relative') to the right side

I am facing an issue with the header section of my website. The background-image is styled using the following CSS: .header { position: relative; min-height: 436px; background: url("../img/holland-canal.jpg") no-repeat; background-size: co ...

cssresponsive-design

Creating a vertical scrollable content using FlexBox

Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...

cssreactjsflexboxmaterial-ui

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

jqueryhtmlcss

What was the reason behind resolving the 0 height body problem by adjusting the WebView Layout Parameter?

My Xamarin WebView was not displaying my HTML correctly. Even though it was set to fill the whole screen, the body height in the HTML remained at 0px. In addition, I had a div in the HTML with the following style: position:absolute; top:0px; bottom:0px; ...

androidcssxamarinwebviewxamarin.forms

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

csssvg

Tips for Personalizing Bootstrap 4.3 Through BootstrapCDN

I'm having trouble customizing the Bootstrap 4.3 BootstrapCDN by linking an external CSS file to override it. Even though I have placed the custom CSS file below the Bootstrap one, it doesn't seem to be taking effect. Can anyone explain why? Th ...

htmlcssbootstrap-4

Show one line of text at a time with a pause in between each one

On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also ...

jqueryhtmlcssjquery-plugins

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

javascriptjqueryhtmlcss