Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text.

<div class="container">
  <div class="col-md-12">
    <div class="row">
      <div class="col-sm-2">
        <div class="components-circle inner-component"></div>
      </div>
      <div class="col-sm-4">
        <h3>Title</h3>
        <p class="description">
          Some ... long ... text
        </p>
      </div>
      <div class="col-sm-2">
        <div class="components-circle inner-component"></div>
      </div>
      <div class="col-sm-4">
        <h3>Title</h3>
        <p class="description">
          Some ... long ... text
        </p>
      </div>
    </div>
  </div>
</div>

The CSS styles for components-circle and inner-component are:

.components-circle {
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  height: 115px;
  width: 115px;
  border-radius: 100%;
  border: 2px solid #e0e0eb;
}
.inner-component {
  background: url(http://...) no-repeat;
  background-position: 20px 15px;
}

However, the issue arises when resizing the browser as components-circle and inner-component start overlapping the adjacent text on the right side. This lack of responsiveness in the template is problematic.

Is there a way to introduce line breaks when resizing the browser or make components-circle and inner-component responsive to prevent overlap with the corresponding text?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Does the content inside the "col-sm-12" div overlap with the surrounding text or the image? You can resolve these issues by wrapping everything in a "container" or "row" div and adjusting the CSS for responsive design.

.components-circle {
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  height: 115px;
  width: 115px;
  border-radius: 100%;
  border: 2px solid #e0e0eb;
}
.inner-component {
  background: url(http://...) no-repeat;
  background-position: 20px 15px;
}

.center-text{
  text-align: left;
}

@media (max-width: 765px) {
  .center-text{
    text-align: center;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-12">
   <div class="row">
     <div class="col-sm-2">
       <div class="components-circle inner-component"></div>
     </div>
     <div class="col-sm-4 center-text">
       <h3>Title</h3>
       <p class="description">
         Some ... long ... text
       </p>
     </div>
     <div class="col-sm-2">
       <div class="components-circle inner-component"></div>
     </div>
     <div class="col-sm-4 center-text">
       <h3>Title</h3>
       <p class="description">
         Some ... long ... text
       </p>
     </div>
   </div>
 </div>
</div>

Answer №2

If you're utilizing the row class already, simply adjust the width of components-circle to 100% instead of setting it as static. This way, Bootstrap will take care of the responsive design automatically.

To maintain the aspect ratio of height-width, remove the height attribute from components-circle and utilize padding-top. Check out an example here to understand how this works (setting padding-top: 100% creates a 1:1 aspect ratio).

Open the snippet in full-page view and resize your window to see the impact :)

While there are other ways to accomplish the same result, I find this method to be simple and easy to comprehend.

.components-circle {
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    padding-top: 100%;
    width: 100%;
    border-radius: 100%;
    border: 2px solid #e0e0eb;
  }
  .inner-component {
    background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
      background-size: contain;
  }
<html>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <div class="col-md-12">
          <div class="row">
            <div class="col-sm-2">
              <div class="components-circle inner-component"></div>
            </div>
            <div class="col-sm-4">
              <h3>Title</h3>
              <p class="description">
                Some ... long ... text
              </p>
            </div>
            <div class="col-sm-2">
              <div class="components-circle inner-component"></div>
            </div>
            <div class="col-sm-4">
              <h3>Title</h3>
              <p class="description">
                Some ... long ... text
              </p>
            </div>
          </div>
        </div>
    </body>
</html>

Update: To center the inner image during resizing, ensure its position is set to 0px 0px (default) and include background-size: contain in the inner-component styles. This adjustment will scale the image to fit within its parent container. See the updated snippet above!

Answer №3

To create a breakpoint that stays hidden on larger screens, you can utilize these CSS classes along with the line break:

.d-md-none to hide it on screens bigger than md size.

.d-sm-none to make it disappear on screens larger than sm size.

It may be necessary to nest the row within a container.

This is how you would implement it: <br class="d-md-none">

If you prefer a line break without using a <br> element, take a look at this helpful guide.

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

The issue of children inside a parent div not respecting the height value set to 100% when the parent div has a min

My goal is to adjust the height of children elements within a parent div that has a min-height of 100%. I want the wrapper's height to dynamically adjust based on the content it contains. When I set the min-height to 100%, the wrapper expands accordin ...

htmlcss

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

I need help including an HTML page using ng-click within ng-repeat. However, it is currently loading all the content for every ng-repeat element. My specific requirement is to only bind(ng-include) the clicked element. Please see the attachment for m ...

javascriptjqueryangularjshtml

Multiple keyup events being triggered repeatedly

Currently, I am developing an Angular 4 application. Within my component's HTML, there is a textbox where users can input text. As soon as the user starts typing, I want to trigger an API call to retrieve some data. The current issue I am facing is t ...

htmlangulartypescriptrxjs

An inclusive CSS-compatible calendar control for ASP.NET

I am currently using the Calendar control provided by .NET but I have encountered issues with how it renders HTML in certain situations. Unfortunately, this is hard-coded and cannot be changed. It seems that the Calendar control has not been updated in .NE ...

asp.netcsscalendar

Connecting to a particular destination on an external site

Can I add a link on my website that directs users to a specific location on another website, similar to an anchor tag but without creating the anchor point myself? I have a feeling it might not be possible, but perhaps there is a clever workaround. ...

csshtml

Utilize either an array or object within the edit.php file when working with Grocery CRUD

Here's a snippet of code I'm grappling with: public function render() { // Apply filters if necessary $this->applyFilters(); // Define Columns and Fields $columns = array('code', 'name', 'fname&apos ...

phptwitter-bootstrapgrocery-crud

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

cssangularsass

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning c ...

htmlcssangular

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

htmlw3c-validationsemantic-markup

`The font appears extremely thin when viewed on Safari and iOS devices.`

I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } fr ...

cssiosmaterial-uinext.jswebfonts

Rails pagination will only show the link to the current page

Is there a way to show only the current page link with the << Previous link hidden when on the first page and next >> link hidden when on the last page? It should look like this: On the first page: 1 | next >> On the last page (with 4 ...

htmlcssruby-on-railswill-paginate

Tips for customizing the focus style of a Text Field in Material-UI

My current Search box design is represented in the following image: https://i.sstatic.net/VuKIp.png I am looking for ways to customize the background color, border, and icon of the search box when it is focused. Additionally, I would like to know how to m ...

htmlcssreactjsmaterial-ui

Display HTML content using AJAX within a div element

Within my HTML code, I have the following: <li class="register"><a href="">Registreer</a></li> as well as <div id="content"> </div> I attempted to load an HTML file into the div using the code below in the header se ...

javascriptjqueryhtmlajax

How can I dynamically update an img src using JavaScript on a PHP webpage?

I have a PHP page where I display image thumbnails. I am trying to implement a feature where the thumbnail expands in another image on mouseover. Here is the PHP code snippet: echo "<tr><td><a href='$imgrow[location]' target=&ap ...

javascriptphphtml

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

javascripthtmlangulartypescript

What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds. To view my progress so far, please visit https:// ...

htmlcssreactjsresponsive-designmaterial-ui

Building a JSON-powered navigation bar with Bootstrap 4

Looking to create a custom navigation bar using Bootstrap 4 and populate it with items from a JSON file. Despite researching various methods, there seems to be limited resources available on this topic. Any assistance or guidance would be greatly appreciat ...

javascriptjqueryjsonbootstrap-4

Enhancing Your Vue Experience: A Guide to Highlighting and Selecting HTML Elements on Mouse Hover

Incorporating a navigation header using Vue, I utilize v-html to display it seamlessly. Check out the demo - here <section class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50"> <nav class="flex justify ...

htmlvue.js

The jQuery code stops functioning once the identical HTML content is loaded through AJAX

Before you mark my question as a duplicate, I have already attempted the solutions provided by similar issues, but unfortunately none of them have resolved my problem. Here is my specific issue: I am working with a fragment that includes the following inpu ...

htmlajaxjqueryevent-handling

The request response was a JSON object that started with the keyword "POST"

My frustration is growing as I encounter a strange issue with the stack template I purchased from envato market. Every time I attempt a simple ajax request, the json returned from my PHP script seems to be invalid. Interestingly, the exact same code works ...

phpjqueryhtmljsonajax