Exploring the contrasting behaviors of CSS in Codepen and Bootstrap

I am attempting to adjust the text to fit into divs of varying sizes that are responsive due to viewport units.

There seems to be an issue: the code below works well in a Codepen, at least for the four examples I have: https://codepen.io/gramm/pen/VJPavg

The text fits perfectly inside the div and does not overflow when resizing the page. However, when using the exact same HTML and CSS on my Bootstrap 4 page, the text overflows.

EDIT: Initially, it was working fine in Firefox 60.7.1(esr). After updating to 60.7.2(esr), the text started overflowing even in the codepen. It's also overflowing in Edge...

Codepen: no overflow

Bootstrap page: overflow

Can anyone pinpoint the cause of this behavior? Is it something in Bootstrap causing the discrepancy from what we see in Codepen? Or is there some CSS styling in CodePen that I might have missed on my page?

htmlcssbootstrap-4codepen

Answer №1

When using Bootstrap, it's important to include a <div class="row"> inside your container. The pseudo-element on .row clears the float after all content, which can solve some layout issues.

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div id="tm242" class="text">
                <!-- Your content goes here -->

            </div>
        </div>
    </div>
</div>

Additionally, make sure to avoid setting a fixed height on the div with ID #tm242. If the text doesn't fit, let bootstrap handle the height calculation for you by removing any specific height settings.

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 process for creating a luminous sweeping animation on an SVG image or logo?

Is it possible to apply light sweep effect only on the SVG logo? The light sweep effect is triggered when hovering over the logo The effect should be limited to the path inside the SVG image .preloader { position: fixed; display: flex; align-ite ...

htmlcsspseudo-elementeffectslight

The AngularJS framework is failing to disable the autocomplete feature for the input field with a password type

I have attempted to disable auto-complete for the password input, but it doesn't seem to be working. Below is a sample of my code: <form name="testfrm" ng-submit="test(testfrm)" autocomplete="off"> <input type="password" id="passwor ...

javascriptjqueryhtmlcssangularjs

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

javascriptcss

Develop a Greasemonkey userscript that eliminates specific HTML lines upon detection

I am attempting to create a Grease Monkey script that can eliminate specific lines in HTML code. For example, consider the following: <ul class="actionList" id="actionList" style="height: 158px;"> <li class="actionListItem minion minion-0 fi ...

javascriptjqueryhtml

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

javascriptjqueryhtml

Bootstrap grid with 4 columns featuring text of varying lengths and styles

I currently have a layout on my webpage that consists of four columns. Each column includes a logo, an <h2> tag, and a <p> tag. My issue is with aligning the paragraphs horizontally so they match consistently. Whenever the text in the <h2&g ...

twitter-bootstrapgridbootstrap-4

Is it Possible to Customize the Font Color of the Bootstrap Disabled Class in Bootstrap 4?

I am currently using version 4.4.1 of the Bootstrap gem for my Rails application which includes a Bootstrap 4 navbar. Below is a snippet from my navbar code: <ul class="navbar-nav ml-auto"> <!-- Hidden li included to remove active class fro ...

htmlcssruby-on-railsbootstrap-4disabled-input

What is causing the Bootstrap 5 navbar to not collapse?

Struggling to compile Bootstrap 5 with sass, I have a feeling that I might be missing some important scss files. When I added the <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7 ...

htmlcsstwitter-bootstrapsassbootstrap-5

Fade out the content using jQuery and simultaneously change the div

I stumbled upon this interesting code snippet here: http://jsfiddle.net/7hqyq/ Being a novice in the realm of jQuery, I am curious to learn how one can modify the background color of the selected square (including the first square on page load) and implem ...

jqueryhtmlfade

Working with JQuery to extract and append data stored in a JSON object

I am working with the following JSON data: [ { "MOD_AXL": 0, "MOD_CDS_ID": 110000168, "MOD_CV": 0, "MOD_CV_CTM": null, "MOD_ID": 168, "MOD_MFA_ID": 514, "MOD_PC": 1, "MOD_PCON_END": 199007, "MOD_PCON_START": 196303, ...

jqueryhtmlruby-on-railsjson

How can we incorporate interactive icons into the navigation bars on our Weebly site?

Recently, while using Weebly to design a website, I stumbled upon a webpage () that explains how to add icons to the navigation bar. Below is the code provided: /* External Fonts */ @font-face { font-family: 'dashicons'; src: url('fonts/ ...

htmlcssfrontendweebly

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

ioscssiframeresponsive-designmobile-safari

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

htmlcsscss-grid

One cool CSS trick: altering a div's background color with hover!

I'm working on creating a div that acts as a link to another page. My goal is to have the entire background color of the div change to blue when someone hovers over it. I want to achieve this effect using CSS only, as I am not sure if javascript will ...

htmlcss

Trying to extract data from the ASX website's table using web scraping techniques

My goal is to extract the current stock value from the ASX.com.au website. Specifically, I am interested in retrieving the current ASX value, which can be located here. The value I am looking for is in the second td from the left, currently standing at 30 ...

phpjavascriptjqueryhtml

Tips for refraining from transmitting visuals to cell phones in a more meaningful way

Typically when working on responsive or mobile-first design, media queries are utilized to deliver different CSS styles based on screen size. An optimal design strategy may involve not including any images in the default (small) resolution layout. While ...

htmlcssimageresponsive-design

Adjusting the Aspect Ratio of an Embedded YouTube Video

<!DOCTYPE HTML> <head> <style> body { overflow: hidden; margin:0; } </style> </head> <body> <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&sh ...

javascriptjqueryhtmlcssyoutube

javascript: obtain the height of the pseudo :before element

Can someone help me figure out how to get the height of a pseudo :before element? I've tried using jQuery but it's not working as expected. Here's what I attempted: $('.test:before').height() // --> null If you want to take a ...

javascripthtmlcss

Sort by the date using a specific data attribute

My main objective is to showcase a multitude of posts on this website, sourced from a server that does not organize them by date. I, however, wish to arrange them based on their dates. Currently, the layout on my website looks something like this: < ...

javascriptjqueryhtmlsorting

Troubleshooting issue: PHP script displaying an HTML table containing PHP code results in a syntax

I have a piece of code that I want to use to output an HTML table with PHP embedded in it. EDIT: Apologies, I realized that I didn't provide the entire code. Maybe this will make a difference. <!doctype html> <html> <head> & ...

phphtml