What could be the reason my card isn't functioning properly with bootstrap?

Recently, I designed a card layout as shown below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
            <div class="card">
            <div class="card-body">
            <div class="container mr-0 pr-0">
            <div class="row">
            <div class="col-2">
            <img width="150" heigth="150" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
            </div>
            <div class="col-10 text-left pr-0">
            <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
            <div>
                <span class="mr-5" style="font-weight: lighter; font-size: 12px;">100 POSTS</span>
                <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWERS</span>
                <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWING</span>
                <span class="m-5" style="font-weight: lighter; font-size: 12px;">Phone: 100</span>
                <span class="m-5" style="font-weight: lighter; font-size: 12px;">Email: 100</span>
            </div>
            <div class="mb-1 mt-1">
                <span style="font-weight: bold; font-size: 12px;">More Text</span>
            </div>
            <div>
                <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
            </div>
            </div>
            <div class="col-12 pr-0 mt-3">
            <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
            </div>
        </div>
        </div>
        </div>
        </div>

I'm encountering an issue where, if the window size decreases below 1920 x 1080p, the div elements don't stack properly until reaching the end.

The text starts overlapping with the image and other content. How can I ensure proper responsiveness using Bootstrap?

While the design appears fine in fullscreen mode, shrinking the window leads to text overlap issues. What could be causing this? And how can I make it responsive with Bootstrap?

javascripthtmlcsstwitter-bootstrap

Answer №1

  1. Eliminate the mr-0 pr-0 classes from 

    <div class="container mr-0 pr-0">

  2. Adjust the grid layout for each div as follows:

    • For lg screens, allocate 2 grids for images and the remaining for descriptions.
    • For small and medium screens, allocate 4 grids for images and the rest for descriptions.

Check if the code snippet below meets your requirements -

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-2 col-sm-3">
          <img width="150" heigth="150" class="img-fluid " src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-lg-10 col-sm-9 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>

          <div class="col-lg-10 col-md-9 col-xs-5">
            <span class=" col-md-4 col-xs-4" style="font-weight: lighter; font-size:12px;">100 POSTS</span>
            <span class="col-md-5 col-xs-4" style="font-weight: lighter; font-size:12px;">100 FOLLOWERS</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">100 FOLLOWING</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Phone: 100</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size:12px;">More Text</span>
          </div>

          <div>
            <span style="font-weight: normal; font-size:12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
             </span>
          </div>

        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>

      </div>

Answer №2

To create responsive columns, simply add breakpoints to the column classes - col-{sm|md|lg|xl}-*.

For more information, refer to the documentation: https://getbootstrap.com/docs/4.5/layout/grid/

When using cards, there is no need to include a container class within it. Just use row and col.

Here's a simplified version of the code focusing on the essential elements:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<div class="card">
  <div class="card-body">
    
    <div class="row">
      <div class="col-lg-2">
        <img class="w-100 d-block" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" >
      </div>
      <div class="col-lg-10">
        <div>USERNAME</div>
        <div>100 POSTS</div>
        <div>100 FOLLOWERS</div>
        <div>100 FOLLOWING</div>
        <div>Phone: 100</div>
        <div>Email: 100</div>
      </div>          
      <div class="col-12">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
      </div>
      <div class="col-12">
        <button type="button" class="btn btn-primary">Extract</button>
      </div>
    </div>
    
  </div>
</div>

Answer №3

Here are some recommended actions:

  • Delete the div.container.mr-0.pr-0 located within the div.card-body
  • Include .img-fluid to the img

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-2">
        <img width="150" heigth="150" src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" class="img-fluid" />
      </div>
      <div class="col-10 text-left pr-0">
        <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
        <div>
          <span class="mr-5" style="font-weight: lighter; font-size: 12px;">100 POSTS</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWERS</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">100 FOLLOWING</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">Phone: 100</span>
          <span class="m-5" style="font-weight: lighter; font-size: 12px;">Email: 100</span>
        </div>
        <div class="mb-1 mt-1">
          <span style="font-weight: bold; font-size: 12px;">More Text</span>
        </div>
        <div>
          <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.</span>
        </div>
      </div>
      <div class="col-12 pr-0 mt-3">
        <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
      </div>
    </div>
  </div>
</div>

Answer №4

<!-- Check Out This Code -->    
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="card">
  <div class="card-body">
    <div class="container-fluid">
      <div class="row">
        <div class="col-3">
          <img class="img-fluid"  src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-9 text-left">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>
          <div class="row">
            <span class="col" style="font-weight: lighter; font-size: 12px;">100 <br>POSTS</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">100 <br>FOLLOWERS</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">100 <br>FOLLOWING</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">Phone: <br>100</span>
            <span class="col" style="font-weight: lighter; font-size: 12px;">Email: <br>100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size: 12px;">More Details</span>
          </div>
          <div>
            <span style="font-weight: normal; font-size: 12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit....</span>
          </div>
        </div>
        <div class="col-12">
          <button type="button" class="btn btn-primary float-right mr-2">Retrieve</button>
        </div>
      </div>
    </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

Discovering vacation days in the Persian calendar (Shamsi)

How can I access Persian calendar holidays in React without using paid APIs? Is there a free way to get information about Persian (shamsi) holidays, including descriptions? { 1402:[ { date: "1402/1/2", description: "عیدن ...

javascriptreactjscalendar

The unresolvable IE7 Z-Index dilemma caused by a bug within nested elements!

Take a look. I'm struggling to get the .menu ul to display properly, it's frustrating! It shows up in ie6, ie8, safari, and ff, but not ie7! I've tried everything. Any suggestions? (I'm almost at xhtml strict validation too). ...

csslistinternet-explorer-7nestedz-index

Activate only the content of the parent div in a duplicated list using Javascript

Exploring the world of JavaScript, I am focusing on mastering event listeners and node lists. However, I have hit a roadblock when it comes to the JavaScript syntax for a specific query. My goal is to extract the innerHTML of each button and display it in ...

javascripthtml

Integrating C code into an HTML webpage

My C code includes #include <stdio.h> and I want to display it on a webpage using the pre and code tags. However, the angle brackets are disappearing in the output. #include stdio.h Is there a way to show the stdio.h with the angle brackets intac ...

htmlc

What is the best approach to arranging three items within an array in a specific sequence?

This particular query is an extension of a previous one found here In my application, I have implemented a cart feature where users can add or remove items. When displaying this cart, it will only show a maximum of 3 items. However, the problem arises whe ...

javascriptarraysreactjssorting

What is the best way to declare media queries for resolutions both above and below 1366?

Is it possible to define different CSS files based on screen resolution in HTML? For example, one file for screens with width of 1366px or lower and another for higher resolutions. Could you kindly provide me with the correct HTML code for this? ...

htmlcssmedia-queries

Scrollable Bootstrap navigation bar

I'm attempting to modify the Bootstrap navbar's behavior so that it utilizes a horizontal scroll instead of collapsing. While this works on mobile devices, I want it to function the same way on all devices using SASS: .navbar-nav { li { di ...

csstwitter-bootstraptwitter-bootstrap-3

JavaScript comparing elements within an array

I need help extracting all the names from an array with URLs containing '/blekinge' and presenting them in a list. Here's what I have so far: const allLocations = locations.map((location) => <li>{location.url}</li> ) I&a ...

javascriptarraysreactjs

There was a parsing error due to encountering an unexpected reserved word 'interface' in the code, as flagged

I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...

javascriptreactjstypescriptnext.js

Images are not displaying on the browser when printing

Is there a way to display specific content when using the printThis jQuery plugin on my website? I've noticed that when I click on print_btn, images and <hr> elements are not included in the print. What could be causing this issue? HTML <bu ...

javascriptjqueryhtmlcssprintthis

The error message "navigation.navigate is not a function" is encountered while working with React Native

I encountered an issue with navigation in my React application. The error message "undefined is not an object (evaluating 'navigation.navigate')" appears when attempting to navigate to another screen using a button from a different route. Here i ...

javascriptreact-nativereact-navigation

Dealing with errors gracefully in AJAX requests in Javascript

I'm facing an issue with the reliability of reloading web pages. I have a PHP page that needs to run every 15-20 seconds, but my hosting provider does not allow web cron or perl scripts. My workaround is to set the page to reload itself within that ti ...

javascriptajaxreload

Can Backbone help with generating modals on the fly?

I currently have a backbone model that represents items and is integrated into a template known as cards. Whenever I click on a card template, a bootstrap modal appears showing the card information. However, the way I am accomplishing this is quite messy a ...

javascriptjquerytwitter-bootstrapbackbone.js

Step-by-step guide on generating and showcasing an event exclusively using the Calendar Strip React Native npm module

I recently started exploring the world of React Native and Expo, and I have been diving into the documentation for Calendars in React Native and Expo. During my research, I came across a fantastic npm package called Calendar Strip that caught my attention. ...

javascriptreactjsreact-nativecalendarexpo

A method to link the chosen state of an option to a boolean variable in AngularJS

My task involves managing a collection of select elements with options specified in a JSON object. Each option should have its selected state preserved as a boolean value. This means that when a user chooses an option, the "selected" value for that option ...

javascriptangularjsangularjs-directive

How do I retrieve the value of a class that is repeated multiple times?

In the HTML code I am working with, there are values structured like this: <div class="item" onClick="getcoordinates()"> <div class="coordinate"> 0.1, 0.3 </div> </div> <div class="item" onClick="getcoordinates() ...

javascripthtml

Incorporating a stationary sidebar onto your website

My goal is to create a fixed side menu similar to the one on this website: Below is my HTML code: <!-- Scroll TEST --> <ul id="followTab"> <li> <a class="newsletter" href="newsletter/" title="Subscribe to ..."> ...

htmlcss

Employing a selection menu within a form to execute a SQL SELECT query

Thank you for taking the time to read my question. I am currently in the process of developing a form that will allow users to search a database for cards used in a collectible card game. One important feature I want to include is a dropdown menu that ena ...

phpsqlhtml

Issue with Colorbox plugin preventing ASP.NET button from triggering postback

Currently utilizing the colorbox modal plugin (http://colorpowered.com/colorbox/) I'm facing an issue with a simple form placed in a master page - the submit button is unresponsive and doesn't trigger any action. It seems like several users are ...

c#javascriptasp.netjquerycolorbox

Can I send a DELETE request with request body and headers using Axios?

When working with Axios in ReactJS, I am attempting to send a DELETE request to my server. In order to do this, I need to include the following headers: headers: { 'Authorization': ... } The body of the request consists of: var payload = { ...

javascriptreactjshttpaxioshttp-delete