"Utilizing Bootstrap 4: Wide text causes columns to stack on top of

My website has a layout with three columns: col-auto on the left, col in the middle, and col-auto on the right.

The col-auto columns display skyscraper ads (600x160) while the col column contains text. However, when the text inside the col column is wide, it causes alignment issues where the left column overlaps the card and the right column moves below it.

When the text is not wide, I can shrink them using d-none d-md-block classes and everything looks fine, as the columns remain properly aligned in their designated spots.

Although setting overflow to auto helps somewhat, I am still facing the issue of columns stacking incorrectly. Shouldn't the "col" class prevent this kind of stacking behavior?

I want the columns to always stay beside each other regardless of the width of text inside the card,

If anyone has any suggestions or solutions, please share them!

Answer №1

It seems like the issue lies in using "col-auto" for the wide content. When you use "col", the content will not stack, but with "col-auto", it will try to adjust the content size and stretch to the full width of the row if needed.

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

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Trying to figure out how to create an image carousel in Vue using photos from an API. Currently able to display the photos using: <section class="images"> <img v-for="image in images" :key="image.id":src="image.assets.large.url"> &l ...

Accessing the Bootstrap tab form from an external source

I currently have Bootstrap tabs on a page and they are functioning correctly. However, I am looking to open these tabs from an external page. Is this feasible? <div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> ...

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

I am encountering an issue where the characters "£" is displaying as "£" when my HTML is rendered. Can anyone explain why this is happening?

Here is the code I'm having trouble with: http://pastebin.com/QBLeLyNq. For some reason, the "code" part isn't working correctly. Any help would be appreciated. I used to run a small business and had a profit of £145 with an investment of only ...

Tips for automatically setting focus to the following cell after inserting a new row in AngularJS

Transitioning from the Knockout world to Angular, I am facing an issue with a key-press event for tab. Whenever I add a new row in the table, the focus shifts to the information icon in the URI bar instead of the next cell in the newly created row. I belie ...

How to place an image in the bottom right corner using CSS

Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

Currently, I am in the process of constructing a layout using a table with nested ng-repeat. <div ng-controller="PresetManageController"> <table> <in-preset ng-repeat="preset in presetManage.presets"></in-preset> </table ...

sticky position is functional in Chrome, however it does not work in Firefox

I am looking to create a vertical div that stretches to the height of its parent container and contains smaller divs. If there is extra space, all divs except for the last one should be positioned at the top, with the last div placed at the bottom. I used ...

How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

I have successfully implemented a jQuery script to change the background color of my navbar on scroll. Here's the code I used: jQuery(document).ready(function($) { $(window).scroll(function() { var scrollPos = $(window).scrollTop(), nav ...

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

Bug Found in AngularJS v1.3.15: Text Color Rendering Glitch on Page Load with WebKit

It appears that the text colors (which should be blue) are not displaying correctly until a user hovers over the text or resizes the window. I attempted to resolve this issue by adjusting the transition property so that it triggers on hover/active states ...

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

Invoking an *.aspx method from an external HTML file

Greetings, I am a newcomer to the world of web application development. I have successfully created an *aspx page that communicates with a webservice through a method returning a string. My next goal is to invoke this aspx method from a remote HTML 5 page ...

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on t ...

Avoid repetitive clicking of the button to activate the function

Is there a way to prevent spamming of a button when calling a function? I want the user to only be able to call the function once every second when clicking the button. I have tried using setTimeout but it doesn't seem to work, as it still allows for ...

HTML: Image not updating despite meta tag refresh

I am using the following HTML5 code to display an HTML page with an image (1.JPG). The setup is working correctly, but I am encountering an issue. The image at the specified path is supposed to be randomly replaced with a newer image within a certain tim ...

Creating dynamic visual effects for text on image with animation

I have created an animation where an image transitions from black and white to colored upon hover, accompanied by overlay text. However, when hovering over the text, the image reverts back to black and white. How can I ensure that the image stays in color ...

What is the best way to overlay a video onto an image using HTML and CSS?

Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...