Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone.

Take a look at the code snippet and screen capture provided below...

<div class="container pl-0 pr-0">
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10 pl-0 pr-0"><p>
If you're interested in learning Japanese, it requires dedication. <br>
<br>

  <div class="row">
    <div class="col-3"></div>
    <div class="col-3"><a href="https://vidalingua.com/japanese-english-translator-iphone-ipad">
      <img src="https://vidalingua.com/images/en-jp-translator-thumbnail" 
      style="padding: 0px 0px 0px 0px;" width="200"></a></div>
    <div class="col-3 pl-0 pr-0"><p>
Using a great app makes learning Japanese much easier. <b>Japanese Translator&nbsp;+</b> offers quality translations on-the-go. Get it for free on your <a href="https://vidalingua.com/japanese-english-translator-iphone-ipad">iPhone</a> or <a href="https://play.google.com/store/apps/details?id=com.vidalingua.japanese.dictionary.translator">Android</a>&nbsp;📲<br>
<br>
    </div>
    <div class="col-3"></div>
  </div>

    </div>
    <div class="col-1"></div>
  </div>
</div>

Check out the screen capture...

https://i.stack.imgur.com/2LsrF.png

htmlcsstwitter-bootstrapbootstrap-4

Answer â„–1

If you want your text to appear below an image, use the col-12 class on the container div.

To ensure responsiveness across different screen sizes, add classes like col-sm-3, col-md-3, col-lg-3, and col-xl-3 to position the text correctly relative to the image on larger screens.

For more information on the Bootstrap Grid System, refer to the official documentation.

Below is a sample code snippet illustrating this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404706a726a75">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container pl-0 pr-0">
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10 pl-0 pr-0"><p>
To excel in Japanese, dedication is key. <br>
<br>

  <div class="row">
    <div class="col-3"></div>
    <div class="col-3"><a href="https://vidalingua.com/japanese-english-translator-iphone-ipad">
      <img src="https://vidalingua.com/images/en-jp-translator-thumbnail" 
      style="padding: 0px 0px 0px 0px;" width="200"></a></div>
    <div class="col-md-3 col-12 pl-0 pr-0"><p>
Enhance your Japanese learning experience with a reliable app. <b>Japanese Translator&nbsp;+</b> offers seamless translations anytime, anywhere. Get it for free on your <a href="https://vidalingua.com/japanese-english-translator-iphone-ipad">iPhone</a> or <a href="https://play.google.com/store/apps/details?id=com.vidalingua.japanese.dictionary.translator">Android</a>&nbsp;📲<br>
<br>
    </div>
    <div class="col-3"></div>
  </div>

    </div>
    <div class="col-1"></div>
  </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

What is the best way to give a fixed height to Card content in Material UI? Is CSS the way to go?

I've been struggling with a design issue involving Material-UI cards used to display News. The problem arises when the paragraph section of the card occupies multiple lines of text. When it spans two lines, there is a 10px spacing between the paragrap ...

javascriptcssreactjsmaterial-uimaterial-design

Is it possible to launch an Electron application by clicking a run button in the VSCode

I'm new to using VSCode and am currently working on an HTML5 app with Electron. I'm finding it cumbersome to switch between windows and enter a command each time I want to test my application. Is there a way to configure VSCode to run my Electron ...

javascripthtmlelectron

Is it possible to include a hidden default option that provides a description for my `select` tag?

Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...

jqueryhtmlcss

Displaying content on a click event in AngularJS

I am facing an issue with the ng-show directive not working as expected when a user clicks on an icon. The desired behavior is that the parent div should initially display content, but when the play icon is clicked, the contents of the div should become ...

javascripthtmlangularjs

Expanding the outer div with Jquery's append() function to accommodate the inner div elements perfectly

I am facing an issue where my outer div does not expand automatically to fit the elements I append inside it using jQuery. The structure of my div is as follows: <div class="well" id='expand'> <div class="container"> < ...

javascriptjqueryhtmltwitter-bootstrap-3append

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

cssgoogle-chrome

Executing PHP code on button click in HTMLThe process of running a PHP script when

I am currently working on a project that involves detecting facial expressions using Python. However, I need to pass an image to this code through PHP. The PHP code provided below saves the image in a directory. How can I trigger this code using an HTML ...

javascriptphppythonhtml

Transforming Input Background Color with jQuery based on Matching PHP Array Entry

I am looking for a solution to implement form validation in PHP. The form has 3 fields: user, id, and email. When a user enters their name or id in the respective input fields, I want to check if the entered value matches any of the values in the PHP arra ...

phpjquerycssinput

Is there a way to extract information from a <span> element with restricted access?

I'm currently utilizing bs4 and urllib2 to extract data from a website. Check out the webpage here. The goal is to retrieve the remaining digits of the telephone number 3610...... but beforehand, it's necessary to click on a button to reveal th ...

pythonhtmlweb-scrapingbeautifulsoup

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

javascripthtmltypescript

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Utilizing a standard asp.net menu in an asp.net 4.0 web application, this setup is for a standard web application and not any version of MVC applications currently available. The issue at hand is relatively straightforward. CSS styles are applied to the d ...

asp.netcssmenupseudo-class

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset

Transform your current website layout from a fixed 960-grid system with 12 columns into a fluid and

As a newcomer to web development, I have successfully created my portfolio website. I initially set the body width to 1600px because that matched the size of my banner background in Photoshop. I'm using a 960gs 12-column grid system, but when I view t ...

htmlcssresponsive-design

How to style HTML li elements to wrap like sentences within a paragraph

I am looking to format text list elements in a way that they wrap like sentences within a paragraph. Here is the accompanying HTML & CSS code snippet that demonstrates how li element behaves when it exceeds the width of the ul container. ul { ...

htmlcssword-wrap

Keep table header stationary while accommodating varying column widths

I have come across various solutions for freezing a table header row, such as creating a separate table containing only the header and hiding the header of the main table. However, these solutions are limited to cases where column widths are predetermine ...

htmlcsshtml-table

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

Is there a simple method to include a clear button that hovers after the text in an input field when using a search type input? <input type="search"> ...

htmlcss

Unusual actions from the jQuery Steps extension

I am currently utilizing the jQuery Steps plugin (FIND IT HERE). The issue I'm facing lies within an IF statement that is causing the wizard to return to the first step instead of staying on the current indexed step. While all other IF statements are ...

javascriptjqueryhtml

Is there a way to extract the text that is displayed when I hover over a specific element?

When I hover over a product on the e-commerce webpage (), the color name is displayed. I was able to determine the new line in the HTML code that appears when hovering, but I'm unsure how to extract the text ('NAVY'). <div class="ui ...

pythonhtmlseleniumbeautifulsoupscrapy

CSS for a Dropdown Menu with Multiple Layers

I've successfully implemented a dropdown menu, but now I'm facing the challenge of adding another level to it. Specifically, I want a second level to drop down when hovering over "Test3". What do I need to add or modify in the code to achieve thi ...

htmlcss

Run a JavaScript function in 5 seconds

I'm looking to execute this function after a 5-second delay: $(document).ready(function() { $("#signInButton").trigger('click'); }); Your assistance is greatly appreciated. ...

javascriptjqueryhtmlajaxclick