How can I avoid columns from breaking in Bootstrap?

<div id="mydiv" class="bg-danger row">
    <div>
        <img src="https://www.discoservicemusicheria.com/shop/wp-content/uploads/2013/03/Michael-Jackson-Thriller-25th-Anniversary.jpg" class="rounded float-left" width="280" height="280">
    </div>
    <div class="bg-warning pt-3 ml-4">
        <h2 class="font-weight-bold">{{$album->nome}}</h2>
        <h5 class="mb-5"><a href="">Autore</a></h5>
        <small class="text-muted">8 brani - 24/01/2015</small>
    </div>
</div>

I am looking for a solution to avoid the separation between two divs inside #mydiv when viewing the page on a mobile device.

htmlcssbootstrap-4

Answer №1

apply the flex-nowrap utility class to the .row element

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mydiv" class="bg-danger row flex-nowrap">
  <div>
    <img src="https://www.discoservicemusicheria.com/shop/wp-content/uploads/2013/03/Michael-Jackson-Thriller-25th-Anniversary.jpg" class="rounded float-left" width="280" height="280">
  </div>
  <div class="bg-warning pt-3 ml-4">
    <h2 class="font-weight-bold">{{$album->nome}}</h2>
    <h5 class="mb-5"><a href="">Artist</a></h5>
    <small class="text-muted">8 tracks - 01/24/2015</small>
  </div>
</div>

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

Disabling the button add-ons functionality in Bootstrap 3 for mobile devices

I am facing a challenge with my website that has a visually appealing jumbotron and an enticing email signup call to action bar. The issue arises from the fact that my site is bilingual, catering to both German and English speakers, causing confusion with ...

htmlresponsive-designtwitter-bootstrap-3

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

htmlwordpresstinymceeditor

Transform one column into several columns

I am working with a function that populates a table row by row. Here is the code: function renderListSelecoes(data) { // JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one') va ...

javascriptjqueryhtmlajax

Is there a way to prevent javascript from automatically inserting tags when selecting text?

If you want to view the Fiddle Here Essentially, it's a text-highlighting tool that works almost flawlessly. The problem arises when it encounters tags like <p> or <br> within the selection. The JavaScript code seems to automatically in ...

javascriptjqueryhtml

"Can anyone explain why the text color of my font changes during a transition within a

Check it out on jsfiddle as well: https://jsfiddle.net/phmttrsh/ #btn { font-size: 16px; height: 34px; width: 120px; border: 1px solid #20ACB3; text-align: center; line-height: 34px; background-color: #20ACB3; color: #fff ...

htmlcss

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

What is the process for transferring the value from a list item to the search field box?

I have developed a Bootstrap/jQuery function that can display the item matching the user's search query. However, I am facing some challenges in making the selected item populate the search field or providing clear validation to the user once it is ch ...

javascriptjquerybootstrap-4

Executing functions in TypeScript

I am facing an issue while trying to call a function through the click event in my template. The error message I receive is "get is not a function". Can someone help me identify where the problem lies? This is my template: <button class="btn btn-prima ...

htmlangularjstypescriptangulartypescript1.8

How to send the file path to an API in JavaScript to convert it

I am currently working on a web application that allows users to upload a wav file and convert it to mp3 format. I have successfully implemented the wav to mp3 conversion and saving it to the project folder. However, I am facing an issue with dynamically p ...

javascriptc#html

Unable to capture the text within the span element. Attempting to retrieve a response from a previously run javascript function

Currently, I am facing a challenging task in FileMaker using Webdirect. I have implemented a QR code generator and reader, and while I can successfully read the code, I am struggling to capture the result of the scan. The scanned data is displayed in a hid ...

javascripthtmljquerycss

What could be causing my popup window to not display on top of all other HTML elements?

.box { width: 40%; margin: 0 auto; padding: 35px; border-radius: 20px/50px; background-clip: padding-box; text-align: center; display: inline-block; } .button { font-size: 1em; padding: 10px; color: #222; border: 2px solid #06D85F; ...

htmlcss

Is there a way to determine the origin of a CSV file shared through a GitHub link?

I'm a beginner on Github and I need help figuring out how to trace back the origin of this CSV file: https://raw.githubusercontent.com/datasets/covid-19/master/data/countries-aggregated.csv Can someone guide me on how to locate where it was uploaded? ...

htmlpandasdataframecsvgithub

What is the best way to create a list with images in a dropdown menu using HTML?

Thanks so much for your assistance! Below is the code snippet I am currently working on <li><a href="#Language">*LanguageHERE*</a></li> I am hoping to turn this into a dropdown menu that displays flags representing all available ...

javascripthtmlcss

Issue arises when combining inline-block and overflow-wrap for div elements

I am facing an issue with two divs that look good on the same line when utilizing display: inline-block. However, if one of the containers contains an excessively long word that I attempt to wrap using overflow-wrap and word-break, it causes the container ...

htmlcssoverflowinlineword-wrap

Creating a counter for a list using CSS

I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly. Here is the desired format I want to achieve: 1. Acknowledgements 1.1 blah, blah .... 1.2 blah, blah .... 1 ...

htmlcss

Is it possible to utilize the AmMap API for developing an Android application?

I am currently in the process of creating a unique application with HTML, JS, and jQuery Mobile that will feature interactive maps. I have been searching the web for APIs to incorporate interactive maps into my project without using Google Maps APIs when I ...

javascriptandroidhtmlammap

Flask web page - requires showcasing a roster of users and allowing an administrator to choose multiple records

As I venture into the world of Python flask coding, one challenge I'm facing is displaying a user list on an html webpage and allowing the admin to select multiple entries. Once selected, these users will receive a broadcast message. I'm seeking ...

pythonhtmlflaskbootstrap-4flask-wtforms

Dynamic resizing navigation with JQUERY

I have successfully created a navigation menu that dynamically resizes each list item to fit the entire width of the menu using JavaScript. $(function() { changeWidth(500); function changeWidth(menuWidth){ var menuItems = $('#menu l ...

javascriptjquerycssnavigation

Is it possible to remove tsconfig.spec.json from an Angular project?

I recently started learning Angular and was introduced to the files tsconfig.app.json and tsconfig.spec.json when setting up an Angular app using Angular-CLI. I found a helpful point about these files on this website. Both tsconfig.*.json files serve as ...

htmlangulartypescriptunit-testingangular-cli

Using Javascript to create a radio button group

Is there a way to trigger an alert message when all radio buttons are checked as 'no'? I currently am only able to check each radio button individually. //The method I currently know $('#attraction1').change( function(){ if ($(this ...

javascripthtmljquery