What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card:

Desktop view

https://i.sstatic.net/XFXKr.png

Current mobile view

https://i.sstatic.net/aSpkk.png

Desired view:

I'm trying to figure out how to make the card look the same on both mobile and desktop views.

Photoshop example:

https://i.sstatic.net/D4nzy.png

/**Product item styling **/
.ratings i {
    font-size: 16px;
    color: red
}

.strike-text {
    color: red;
    text-decoration: line-through
}

.product-image {
    width: 100%
}

.dot {
    height: 7px;
    width: 7px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block
}

.spec-1 {
    color: #938787;
    font-size: 15px
}

h5 {
    font-weight: 400
}

.para {
    font-size: 16px
}

.txt-wrp-on-btn
{
    overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-4 col-sm-4">  
    <div class="row p-2 bg-white border rounded mt-2 mb-2" style="min-height: 130px;">
      <div class="col-md-4 mt-1">
             <img class="img-fluid img-responsive rounded product-image" src="https://i.ibb.co/VL3w7MC/WJXt0n8-Oimy34fxuz-Ihw.jpg">
      </div>
       <div class="col-md-5 mt-1">
         <span class="text-primary " data-toggle="tooltip" data-placement="top" title="6 Pc Meal">
                    <strong>6 Pc Meal</strong>
         </span>

                  <!-- PRICE SECTION -->

                  <!-- IF SERVINGS IS MENU -->
                    <div class="d-flex flex-row align-items-center">
                        <h4 class="mr-1 text-success h6">$20.68</h4>
                        <small class="strike-text mb-2">$22.76</small>
                      </div>
                 <!-- IF SERVINGS IS PLATE -->
                  <p class="text-justify text-truncate para mb-0">
                     3 Thighs and 2 Drums along with Large box of Taters                         </p>

            </div>
               <div class="align-items-center align-content-center col-md-3 border-left mt-1">


                 <!-- DETAIL ICON -->
                 <div class="d-flex flex-column mt-1">
                  <a href="javascript:void(0)" onclick="showModalWithHeader('https://domain/modal/showup/restaurant/menu/20', '6 Pc Meal')" class="btn btn-primary btn-sm txt-wrp-on-btn">
                    <i class="fas fa-info-circle" ></i> 
                  </a>

                  <!-- FAVOURITE ICON -->
                                    <a href="#" class="far fa-heart btn btn-outline-danger btn-sm mt-2 txt-wrp-on-btn" onclick="confirm_modal('https://domain/favourite/update/20')"></a>

                  <!-- ADD TO CART -->
                      <div class="closed-now">

                     <a href="javascript:void(0)" class=" btn btn-outline-success btn-sm mt-2 btn-block txt-wrp-on-btn" onclick="showCartModal('https://domain/modal/showup/restaurant/cart/20', 'Add to cart')"> <span class="fas fa-shopping-cart"></span></a>

                  

                 </div>
                 
              </div>
            </div>
          </div>
        </div>

htmlcssbootstrap-4

Answer №1

Could you kindly review the code link provided below? It should be functional for your needs. We've made adjustments to the bootstrap column classes. If you want the same layout as the desktop version, you can directly add bootstrap column classes col-*.

For example: col-md-4 to col-4.

Here is the link for reference: https://jsfiddle.net/yudizsolutions/y15m3nhj/1/

/**Product item styling **/
.ratings i {
    font-size: 16px;
    color: red
}

.strike-text {
    color: red;
    text-decoration: line-through
}

.product-image {
    width: 100%
}

.dot {
    height: 7px;
    width: 7px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block
}

.spec-1 {
    color: #938787;
    font-size: 15px
}

h5 {
    font-weight: 400
}

.para {
    font-size: 16px
}

.txt-wrp-on-btn
{
    overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4">
  <div class="row p-2 bg-white border rounded mt-2 mb-2" style="min-height: 130px;">
    <div class="col-4 mt-1">
      <img class="img-fluid img-responsive rounded product-image" src="https://i.ibb.co/VL3w7MC/WJXt0n8-Oimy34fxuz-Ihw.jpg">
    </div>
    <div class="col-5 mt-1">
      <span class="text-primary " data-toggle="tooltip" data-placement="top" title="6 Pc Meal">
        <strong>6 Pc Meal</strong>
      </span>

      <!-- PRICE SECTION -->

      <!-- IF SERVINGS IS MENU -->
      <div class="d-flex flex-wrap flex-row align-items-center">
        <h4 class="mr-1 text-success h6">$20.68</h4>
        <small class="strike-text mb-2">$22.76</small>
      </div>
      <!-- IF SERVINGS IS PLATE -->
      <p class="text-justify text-truncate para mb-0">
        3 Thighs and 2 Drums along with Large box of Taters </p>

    </div>
    <div class="col-3 align-items-center align-content-center border-left mt-1">


      <!-- DETAIL ICON -->
      <div class="d-flex flex-column mt-1">
        <a href="javascript:void(0)" onclick="showModalWithHeader('https://domain/modal/showup/restaurant/menu/20', '6 Pc Meal')" class="btn btn-primary btn-sm txt-wrp-on-btn">
          <i class="fas fa-info-circle"></i>
        </a>

        <!-- FAVOURITE ICON -->
        <a href="#" class="far fa-heart btn btn-outline-danger btn-sm mt-2 txt-wrp-on-btn" onclick="confirm_modal('https://domain/favourite/update/20')"></a>

        <!-- ADD TO CART -->
        <div class="closed-now">

          <a href="javascript:void(0)" class=" btn btn-outline-success btn-sm mt-2 btn-block txt-wrp-on-btn" onclick="showCartModal('https://domain/modal/showup/restaurant/cart/20', 'Add to cart')"> <span class="fas fa-shopping-cart"></span></a>



        </div>

      </div>
    </div>
  </div>
</div>

Answer №2

To create a mobile-specific design, you can utilize the col-sm-* classes. Comments have been added to indicate where the code has been edited with the prefix EDIT:

/**Product item styling **/

.ratings i {
  font-size: 16px;
  color: red
}

.strike-text {
  color: red;
  text-decoration: line-through
}

.product-image {
  width: 100%
}

.dot {
  height: 7px;
  width: 7px;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 3px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block
}

.spec-1 {
  color: #938787;
  font-size: 15px
}

h5 {
  font-weight: 400
}

.para {
  font-size: 16px
}

.txt-wrp-on-btn {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-sm-12"> <!-- EDIT: 12 columns on smaller screen -->
  <div class="row p-2 bg-white border rounded mt-2 mb-2" style="min-height: 130px;">
    <div class="col-md-4 mt-1 col-sm-4"> <!-- EDIT: Subdivide 12 columns into 4 for the image -->
      <img class="img-fluid img-responsive rounded product-image" src="https://i.ibb.co/VL3w7MC/WJXt0n8-Oimy34fxuz-Ihw.jpg">
    </div>
    <div class="col-md-5 mt-1 col-sm-6"> <!-- EDIT: Create 6 columns for the center part -->
      <span class="text-primary " data-toggle="tooltip" data-placement="top" title="6 Pc Meal">
                    <strong>6 Pc Meal</strong>
         </span>

      <!-- PRICE SECTION -->

      <!-- IF SERVINGS IS MENU -->
      <div class="d-flex flex-row align-items-center">
        <h4 class="mr-1 text-success h6">$20.68</h4>
        <small class="strike-text mb-2">$22.76</small>
      </div>
      <!-- IF SERVINGS IS PLATE -->
      <p class="text-justify text-truncate para mb-0">
        3 Thighs and 2 Drums along with Large box of Taters </p>

    </div>
    <div class="align-items-center align-content-center col-md-3 border-left mt-1 col-sm-2"> <!-- EDIT: Remaining two columns for the last part -->


      <!-- DETAIL ICON -->
      <div class="d-flex flex-column mt-1">
        <a href="javascript:void(0)" onclick="showModalWithHeader('https://domain/modal/showup/restaurant/menu/20', '6 Pc Meal')" class="btn btn-primary btn-sm txt-wrp-on-btn">
          <i class="fas fa-info-circle"></i>
        </a>

        <!-- FAVOURITE ICON -->
        <a href="#" class="far fa-heart btn btn-outline-danger btn-sm mt-2 txt-wrp-on-btn" onclick="confirm_modal('https://domain/favourite/update/20')"></a>

        <!-- ADD TO CART -->
        <div class="closed-now">

          <a href="javascript:void(0)" class=" btn btn-outline-success btn-sm mt-2 btn-block txt-wrp-on-btn" onclick="showCartModal('https://domain/modal/showup/restaurant/cart/20', 'Add to cart')"> <span class="fas fa-shopping-cart"></span></a>



        </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

What could be causing my SVG bezier curves to malfunction in Firefox?

Encountered an issue today where diagrams I have generated are not functioning properly in Firefox when created using the getPointAtLength method. Here is a demonstration of the problem: http://jsfiddle.net/xfpDA/9/ Please take note of the comments at th ...

javascripthtmlfirefoxsvg

Exploring the world of web scraping by using Python to loop through HTML elements

Created a Python script to extract information from the website regarding its asset listings. So far, I have successfully retrieved the name of the first coin "Bitcoin," but I'm unable to get the ticker. With 27 pages on the site, each containing 40 ...

pythonhtmlpython-3.xpandasweb-scraping

Shadow box with arrow/bubble element using CSS

I am looking to add a box shadow around the outline of the bubble below. <div class=speech-bubble-dark></div> .speech-bubble-dark { position: absolute; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 0.4em; ...

htmlcss

The mobile version is experiencing issues with the functionality of the responsive sidebar

Having an issue with the sidebar on this page. In the responsive version, particularly on smartphones, I can't get it to go underneath the content. The sidebar stays connected to the left but doesn't wrap around. Here is the CodePen link. If t ...

cssresponsive-design

Including the HTML Doctype to center child elements within the <td> tags specifically for Internet Explorer

This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...

htmlcssinternet-explorer

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Recently, I've been working on a game using Phaser and encountered some issues while trying to run the code in XAMPP. The game's base is located at htdocs/itw/test.html, with the necessary pngs and json file stored in htdocs/itw/assets/. The pngs ...

javascripthtmlxamppphaser-framework

Saving user input as a local variable to be utilized on a different web page

I am attempting to capture a user input from a form and then utilize that variable on a separate page. This process should be straightforward, but I am not receiving any results and I am unsure of the reason why. Here is the code on the first page: <di ...

javascriptformsbootstrap-4

Utilize MaterialUI's stepper component to jazz up your design with

Is there a way to customize the color of a material ui Stepper? By default, the material UI stepper's icons use the primary color for both "active" and "completed" steps. class HorizontalLinearStepper extends React.Component { state = { activeS ...

javascriptcssreactjsmaterial-ui

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

Stop iPhone body scrolling when fullscreen overlay is opened

My goal is to prevent the body from scrolling when my fullscreen overlay navigation is open. I have added a class show-nav to the body with the CSS attribute overflow: hidden, which works perfectly on desktop but not on iPhones. After researching similar ...

jqueryhtmlioscssiphone

Ensure the first column is fixed and all other columns have the same height

I have encountered an issue where the first column of my table has varying heights compared to the other columns, resulting in inconsistent row heights. Below is the code I am using: <div class="outer"> <div class="inner"> <table> ...

htmlcss

Adjust top position dynamically during resizing

When resizing the window, I am facing an issue with the image going outside of the box. I believe adjusting the position top of the image based on the box height might help in fitting the image properly within the box. $(window).resize(function() { va ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The issue with calling Ajax on button click inside a div container is that the jQuery dialog box is

Here is the code for my custom dialog box: $("#manageGroupShow").dialog({resizable: false, draggable: false, position:['center',150], title: "Manage Group", width:"50%", modal: true, show: { effect:"drop", duration:1000, direction:"up" }, hide: ...

javascriptjqueryajaxhtml

Mirror Image Iframes

Currently, I have been tasked with constructing a side-by-side "frame" using HTML. The idea is that when the content in the iframe on the left is selected, it will appear in the iframe next to it on the same page. Here's some additional context: The ...

javascripthtmlcss

Regularly fetching images from PHP page

Recently, I encountered a challenge with a PHP page that retrieves arguments from the URL to generate an image. The image type (png, gif, etc.) is unknown. Typically, the page is used to embed the image in a standard HTML page like so: <img src="page.p ...

phphtmlimage

Exploring the world of XML parsing with iText

I am curious to learn whether it is feasible to modify the font, color, and size while converting HTML to PDF using xmlWorker.parser. Thus far, I have successfully parsed the input as is, but now I am seeking ways to customize the font, size, color, and ...

htmlpdffontsxml-parsingitext

What steps should I take to ensure a local HTML page retains the current section that is hidden open whenever it is reloaded?

One of the challenges I have encountered with my local HTML note-taking file is that, despite dividing it into hidden sections accessible by clicking on buttons at the top of the page, reloading the content resets it back to its default state. This means t ...

javascripthtml

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

c#css.netwinforms

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

javascriptjqueryhtmlcsswordpress

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

cssbootstrap-4