The <pre> tag is not adjusting the column width properly within the Bootstrap framework

I have utilized Bootstrap CSS to style my webpage. Interestingly, when I incorporate the <pre>...</pre> tag within the class="col", it does not adjust the width of the column as expected, and instead enlarges the entire column's width. However, everything works fine when I apply the class="col-lg-8"

HTML Code

<div class="col">
    <pre>
          <code>
             ...
          </code>
    </pre>
</div>

With <pre> tag and class="col"

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

With <pre> tag and class="col-lg-8"

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

Without <pre> tag

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

Experience it live here

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

The flex box offers a unique feature.

To customize the default behavior, we can include min-width: 0 in our columns.

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

Enable the text to wrap around an interactive object that the user can freely manipulate

Looking for a solution where I can have a floating div that can be moved up and down using javascript while the text wraps around it seamlessly. Similar to how an object positioned in a word document behaves, I want the text to flow around the div both ab ...

javascripthtmlcsscss-float

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

I recently developed a nextjs with electron template application: Here is the link to my code on CodeSandbox: https://codesandbox.io/s/sx6qfm In my code, I have defined CSS classes in VscodeLayout.module.css: .container { width: '100%'; he ...

cssreactjsnext.js

the contents exceed the boundaries

As I work on creating a page to display a list of books, I am facing an issue where the content sometimes overflows out of the book-info box. This usually happens when a book's title is excessively long and goes beyond the set height of 140px. I am se ...

htmlcsscss-float

What is the best way to extract and showcase the caption of an href in a span element?

I want to dynamically load different html pages into a div using jQuery. My goal is to extract the caption of the clicked link and then display it within a span, similar to fancybox functionality. $(".iframe").on("click", function(e) { e.preventDe ...

jqueryhtmlhyperlinktitle

Searching for non-existent PHP index with $_POST superglobal

How can I resolve the issue of encountering an undefined index? Each time I submit without checking the box, I receive an error regarding undefined index. <html> <head> <title>Order</Title> <style> ...

phphtmlpostundefined-index

A guide on changing button text color in Bootstrap 4 using Sass

Is there a way to create a unique button style in Bootstrap 4 with a white (#fff) text color without having to modify the _buttons.scss file? The mixin button-variant usually sets the text color based on the background color. How can I leverage this mixin ...

twitter-bootstrapsassbootstrap-4scss-mixins

Is it possible to separate the words in my navigation bar to create more spacing and change the color of the text to white?

I've been attempting to create a navigation bar without much success. My goal is to position the words "Main Page", "About Me", and "Bibliography" with space between them, aligned left, center, and right respectively. Additionally, I want to change t ...

htmlcss

Design the parent element according to the child elements

I'm currently working on a timeline project and I am facing an issue with combining different border styles for specific event times. The main challenge is to have a solid border for most of the timeline events, except for a few instances that share a ...

javascriptjqueryhtmlcsstimeline

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

htmlcssweb-component

Struggling to perfect your CSS menu design?

For some time now, I have been experimenting with CSS menus that have three levels, but unfortunately, I am struggling to get the layout exactly how I want it. The menu structure itself is simply a series of nested unordered lists within the HTML: <ul ...

htmlcss

What could be causing the tooltip to not function properly with data-html="true"?

I am having trouble with customizing a tooltip. The data-html="true" attribute is not working as expected, and I can't seem to figure out what the issue is. .tooltip-custom { display: inline; position: relative; } ...

javascripthtmljquerybootstrap-4

CSS Testimonial Slider - Customer Feedback Display

I'm having some issues with the code below: <div id="box"> <div class="wrapper"> <div class="testimonial-container" id="testimonial-container"> <div id="testimon ...

javascripthtmlcssweb

Steps for allowing the cells in a Data-Table column to be edited

Is it possible to have editable cells in a column of a Data Table with the support of the plugin? ...

javascriptjqueryhtmldatatables

In order to position content at the center of a <div> element

Just recently delving into the world of Bootstrap, I've hit a roadblock. Here's my current conundrum: <div class="container px-4 py-5" id="hanging-icons"> <h2 class="pb-2 border-bottom">Work Experie ...

htmlcssbootstrap-5

On one webpage, IE 11 is correctly styling certain visited hyperlinks while failing to do so for others

Although I acknowledge that others have asked similar questions, none seem to address the exact issue I am facing, nor do they offer practical solutions or clear explanations. Issue I'm encountering a problem where some visited hyperlinks in IE 11 f ...

cssinternet-explorerhyperlinkcache-controlvisited

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

I am facing an issue with a Vue component that allows me to zoom in on an image and move it around the container. The problem is, when the image is zoomed in, it moves faster than the mouse due to using the scale transform. Additionally, I noticed that cl ...

javascriptcssvue.js

Best Practices for Implementing an Autocomplete Search Box in HTML

I'm currently working on implementing the code below and I could really use some guidance. Despite reading and watching Google Developers' YouTube videos, I am still struggling as I am new to this. My main goal is to integrate an autocomplete sea ...

htmlgoogle-maps

Creating a dynamic Bootstrap navigation bar using PHP

I created a website using bootstrap, but now I want to add more dynamic features. The tutorial I'm following for this does not involve the use of bootstrap. Am I missing something obvious here? Could you please review my code? (To avoid overloading t ...

phphtmlcssbootstrap-4

What causes the discrepancy in margin values between desktop and mobile devices?

In my project, I have a collection of div elements that need to be spaced vertically from one another by the height of the window plus an additional 100px. However, I encountered a discrepancy when setting this margin using jQuery between mobile and deskto ...

javascriptjquerycsswindow

Issue in Chrome when using CSS clip property on nested div elements

Take a look at this fiddle Here is the HTML structure: <div class="parent"> <div class="child"></div> </div> This is the corresponding CSS code: .parent { position: absolute; width: 100px; height: 100px; background: re ...

htmlcssgoogle-chrome