Putting text on top of an image using Bootstrap

Recently diving into the world of Bootstrap, I have come across a puzzling issue:

Take a look at the HTML code from my website:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Watch The Shawshank Redemption</title>
    <link href="/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/Content/Site.css" rel="stylesheet" />
    <link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8 col-md-offset-2">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <img class="img-rounded img-border" src="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX214_.jpg" />
                    </div>
                    <div class="col-lg-9 col-md-9 col-sm-9">
                        <h2 class="pagination-centered">The Shawshank Redemption</h2>
                        <p>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</p>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4"><i class="glyphicon glyphicon-time"></i>142 minutes</div>
                            <div class="col-lg-4 col-md-4 col-sm-4">Release year: 1994</div>
                            <div class="col-lg-4 col-md-4 col-sm-4">Category: Crime</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/Scripts/jquery-2.0.3.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="//vjs.zencdn.net/4.1/video.js"></script>
    <script src="/Scripts/initializers/initializer.js"></script>

</body>
</html>

However, I've encountered an issue where the text is overlapping with the image, causing a visual error as seen in the image below:

Can someone explain why the text is overlapping with the image? I assigned the image 3 columns and the text 9 columns within the row, so I'm uncertain how they are overlapping.

Answer №1

To make the image more responsive, add the img-responsive class. This issue arises when the image exceeds the width limit.

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

Incorporate a website design template into your Visual Studio project

I have a website application that I created but it's currently empty. I would like to add some style to it using online free website templates that I downloaded. However, I'm unsure of how to incorporate the css, font, and images folders into the ...

Tips for keeping a div visible while hovering over a link using only CSS

Apologies for any language errors in advance. I will do my best to explain my issue accurately: In my CSS, I have created a hidden div that is displayed none by default. When I hover over a link in the navigation bar, I change the display to block, creati ...

How can we validate the radio buttons to show a value even if none of the buttons are checked?

In my registration form, I have a gender radio option with "male" or "female" choices. Both options are unchecked initially so the user must select one. Here is the HTML code: <label class="radio"> <input type="radio" name="gender" id="option ...

Issue with jQuery where it returns "undefined" when trying to access the CSS display property

On my page, there are several divs with default display styles set in an external .css file. When a certain condition is met, I use jQuery to turn one on and the others off using the fadeIn() and fadeOut() methods. However, I've noticed that in Firef ...

Scrolling inside a DIV with fixed positioning

Can you help me with a question? I've been using the jScrollPane plugin and I absolutely love it. However, I'm struggling to retrieve the top position of a div on the page while scrolling inside a jscrollpaned DIV. Using $(window).scroll(); works ...

The three.js library encountered an ERROR 404 ( File Not Found ) when trying to import an existing file

Error: GET http://localhost:port/js/three net::ERR_ABORTED 404 (Not Found) I am currently working on a web development project using Three JS. I downloaded the master Zip of ThreeJS from the official website of Three JS I copied the JS files from the Bui ...

Loading logos dynamically using Jquery upon selection of an option

In the form I created, there is a dropdown logo selection at the bottom. The options in the dropdown are populated from folders in the root directory using the following code: $dirs = glob('*', GLOB_ONLYDIR); Each of these directories contain ...

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

Screen resolution for the background image on the banner

I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...

Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

I am looking to display items in a list with a specific format: |Name | Some other val1| |Very very long no wrap line that...| Some other val2| The right side needs to have a fixed width. The left side should fill al ...

Hide a parent div in jQuery depending on the checkbox status

I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...

When an element is dragged within the mcustomscrollbar container, the scroll does not automatically move downward

I am facing an issue where I have multiple draggable elements inside a Scrollbar using the mcustomscrollbar plugin. When I try to drag one of these elements to a droppable area located below the visible area of the scroller, the scroll does not automatical ...

Global style applied to image property

Within my CSS file, I have a property (shown below) that is set to apply to all images: img{height:auto;max-width:100%;} However, I have a specific div where I do not want this property to apply to the images within it. Even after assigning a new image c ...

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink? Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve. I thought about using tooltips in Bootstrap, but I'm not sure if it ...

Is it possible to customize the Menu hover effect in Element Plus and Vue?

Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover e ...

An issue with the animation script in Ionic

I'm having trouble converting this to an Ionic application. Here's my code sample. Can anyone help me with putting this code correctly in Ionic? I'm trying to achieve something like this example <script src="https://cdnjs.cloudflare.com ...

When a click event triggers, use the .get() method in jQuery to retrieve the content of a page and then update

I am currently facing an issue with a div class="contentBlock", which is acting as the container for updating content. <div class="contentBlock"></div> Unfortunately, the script I have written does not seem to be working properly :c $(docume ...

Working with ASP.NET to toggle the visibility of several div elements

Is the current method I'm using the best practice, or could it be more resource-efficient? On my website, I show and hide divs based on user actions and permissions. Currently, I declare my divs as follows: <div id="NormalView" runat="server" vis ...

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops. The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, ...