The media object in Bootstrap 4 with a pre tag inside is not adhering to the width of the container

Trying to incorporate a media object inside a Bootstrap column is proving challenging. Whenever I insert long strings of code within the .media-body class using 

<pre><code>...<code></pre>
, the entire media object extends beyond the borders of the column.

You can view the issue on this fiddle: https://jsfiddle.net/crazypilot/8dyq4v7x/16/

Any assistance would be greatly appreciated!

Update: My goal is to enable horizontal scrolling within the 

<pre><code>...<code></pre>
so that the .media element does not exceed the width of the column.

cssflexboxbootstrap-4pre

Answer №1

Check out this solution:

.content-area {
    max-width: 90%;
}

90% = width of container.

An alternate method would be:

.content {
    display: flex;
}

.content-area {
    width: 100%;
}

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 is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

cssreactjsmantine

The absence of the `breakInside` rule in GrooCSS

Currently, I am utilizing GrooCSS 1.0-GA for my CSS coding needs. Regrettably, it appears that GrooCSS does not provide support for breakInside as illustrated in the code snippet below: GrooCSS.process(new Config(prettyPrint: true)) { body { breakIns ...

cssgroovydsl

Switching input size

I need assistance with making the input search field wider when clicked on. The transition should be smooth, expanding from right to left. Initially, the input is positioned on the right side of the page and upon clicking, it should stretch to the left by ...

htmlcsscss-transitions

Reordering columns in WHMCS Template using Bootstrap 4

Currently in the process of redesigning my website's theme powered by WHMCS with Bootstrap 4. I am facing challenges in implementing column ordering in the client area similar to the default "six" template in Bootstrap 3. The goal is to have the Prima ...

htmlcssbootstrap-4whmcs

Is there a way to adjust the speed of the transitions between animations?

I've been experimenting with ways to increase the time between animations in my cycle. Adjusting the duration of the keyframes animation hasn't yielded the desired effect. span { animation: rotateWordsFirst 15s linear infinite 0s; ...

cssanimation

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

Place the moving square at the center and bottom of the screen

Can anyone help me figure out how to center and place the red box at the bottom of the orange div? The size of the red box varies from one box to another, both in height and width. This positioning needs to be compatible with all browsers, including Inte ...

csshtmlcross-browsercenter

Shifting a div's position to a different div upon resizing - a simple guide

Current Situation : I currently have two div. One is for the title and the other is for the form section. However, when I resize the screen on mobile devices, the layout does not look correct. Objective : My goal is to adjust the left margin of the di ...

cssbootstrap-4

Is there a way to mix up the sequence of information when replying?

There have been numerous instances where this question has been raised and addressed, such as here, here, and here. However, those discussions pertained to Bootstrap 4, which is approaching its End of Life as of today, 2021-10-20. Given that Bootstrap 5 i ...

csstwitter-bootstrapbootstrap-5

Enhancing user experience with Bootstrap's body padding and customizable scrollbars

Recently, I encountered an issue with the footer color in bootstrap. To fix this problem, I created a div and removed the extra padding from the body element. You can view the code snippet here: jsfiddle.net/wctGM/9/ However, when viewing the mobile ver ...

htmlcsstwitter-bootstrap

Troubles with Fixed Navigation Bar in JavaScript-Enabled Scrolling

I've implemented a JavaScript-enabled scrolling navigation bar that starts below a hero graphic and then sticks to the top when it reaches the top of the page. The functionality works as intended, but there is one issue - when the navigation bar reach ...

javascriptcssscrollfixednavbar

How can I make the Bootstrap tooltip only appear when clicked inside a Vue Component and disappear when hovered over?

I am having a challenge with Bootstrap ToolTip in my Vue component. I only want the notice to show when the button is clicked, not on hover as it currently behaves. I attempted using jQuery within the Vue component without success. Can someone please adv ...

javascriptjquerycssvue.jsbootstrap-4

The issue with negative margin-right is not functioning as expected on Chrome's browser

Hello everyone! I'm having some trouble cropping an image using another div. I've noticed that the margin properties -left, -top, and -bottom are working fine, but for some reason the margin-right isn't cooperating on Chrome. Do you have any ...

htmlcssgoogle-chromemargin

Tips for aligning controls in a column using Bootstrap

My coding issue: <div class="col-lg-4"> <label>Expiration ID</label> <div class="row "> <div class="col-lg-5"> <input type="text" class="form-control input-sm" id="TextIDExpire" /> </div> < ...

htmlcsstwitter-bootstrap

Utilize a link_to on a div element instead of plain text

Is it possible to make the whole div clickable instead of just clicking on ¨Boeken naar AFAS¨? Currently, when you click on ¨Boeken naar AFAS¨, the link_to function is triggered. I would like to have the div itself clickable, so when clicked, it will ...

htmlrubybootstrap-4hamlafas-online

Creating dynamic CSS in .Net Core using Tag Helpers instead of inline styles

Is there a method to dynamically insert CSS into the stylesheet without using inline HTML with TagHelpers? While SetHtmlContent generates dynamic HTML, is there a similar method for CSS? It's commonly recommended to keep CSS and HTML files separate. ...

c#htmlcss.net.net-core

Verify the status of the internet button and display a message indicating whether it has been selected or not

I’ve been attempting to complete this task: opening this particular page in Python, and observing the outcome when the "Remote eligible" button is enabled; do any job positions appear or not? Here's the code I have so far, but it keeps throwing thi ...

pythonhtmlcssselenium-webdriverweb-scraping

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: htt ...

htmlcsstwitter-bootstrap

The min-height property in CSS appears to be ineffective on Jelly Bean

In my current project developing an Android application, I have incorporated Webviews in certain activities and fragments. However, I encountered a perplexing issue when running the app on Jelly Bean (api 16 and 18) emulator - the css property min-height ...

androidcssandroid-webview

Adjusting the size of an element when hovering without causing any displacement of neighboring elements

I've been attempting to get this to work, but I'm running into some difficulties. Here's the example I'm currently working on: HTML: <ul> <li><img></li> <li><img></li> </ul> CSS ul{pos ...

htmlcsslistresizehover