Complete layout photography using bootstrap 4

I'm looking to create a banner that adjusts appropriately for mobile and desktop display. Here's what I've tried:

When it is displayed in mobile

When it is displayed in desktop

In my attempt, the text alignment was off even though I used float-right:

.card-body {
  display: flex;
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    word-break: break-all;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
  <div class="row">
    <div class="card-body col-12 border p-0">
      <img src="https://i.imgur.com/ZyROdEa.png" width="90">
      <h5 class="card-title float-right">9999999999</h5>
    </div>
    <div class="card-body col-12 border p-0">
      <a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapimagebootstrap-4

Answer №1

For setting the margin to the left, you should use margin-left: auto

.card-body {
  display: flex;;
}

.card-title {
  margin-left: auto;
}

h5 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    word-break: break-all;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
  <div class="row">
    <div class="card-body col-12 border p-0">
      <img src="https://i.imgur.com/ZyROdEa.png" width="90">
      <h5 class="card-title float-right">99999952341624624629999</h5>
    </div>
    <div class="card-body col-12 border p-0">
      <a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
    </div>
  </div>
</div>

Answer №2

To make this happen, you can utilize the existing bootstrap-4 class modifications

Simply change ml-4 to ml-sm-4 and introduce a new class called ml-auto to the card-title div 

<div class="shadow card col-md-3 ml-sm-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
  <div class="row">
    <div class="card-body col-12 border p-0">
      <img src="https://i.imgur.com/ZyROdEa.png" width="90">
      <h5 class="card-title ml-auto">9999999999</h5>
    </div>
    <div class="card-body col-12 border p-0">
      <a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
    </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

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

javascriptjquerycss

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive ...

javascriptjqueryhtmlcss

Customize the text displayed on the select box button in a React application

My task involves working with an array of JSON objects structured like this - [ { "country_code": "AF", "country_name": "Afghanistan", "country_flag": " ...

javascripthtmlreactjsselectdrop-down-menu

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

angularjshtmltypescriptangular-ui-router

To open a popup menu with a text box, simply click on the text box

Whenever the text box text is clicked, a popup menu should open with a text box. Similarly, when the filter icon in the right side corner is clicked, a menu should open with a list of checkboxes. However, currently both menus are opening when clicking on b ...

javascripthtmlreactjsreduxmaterial-ui

Eliminate certain inline styles using jQuery

I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am ...

jquerycssinline-styles

Seeking a more deliberate option instead of using $(window).load, one that is not as quick as $(document)

Currently, my goal is to utilize JavaScript to conceal my preloader once the DOM and key elements have been loaded. The issue lies in the fact that various iframes on my page can significantly slow down this process. It seems that using jQuery's $(do ...

javascriptjqueryhtmldom

No Google Adsense ad in sight

Having an issue with my Adsense ad, the script is in the page source code but the ad itself is not appearing. You can check it out for yourself by clicking the link below. The ad should be displayed at the top of the topic. To view the page, click here: ...

pythonhtmlflaskadsense

Problem with Labels Overlapping and Blocking Text Fields

My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times? Prior to engagement: https://i.stack.i ...

cssreactjsmaterial-uilabeloverlay

Troubleshooting issues with media queries related to device pixel ratio

My media queries in LESS are functioning correctly on the desktop, but encountering issues when tested on an iPad2 or Samsung Galaxy 4 phone. It appears that the device-pixel-ratio is causing disruptions. I attempted to reduce the min-device-pixel-ratio to ...

csslessmedia-queries

Exploring the Vertical Metrics of Various Typeface Styles

I'm encountering a problem and struggling to find a solution. I'm in the process of creating a website and incorporating various fonts. My goal is to ensure that every font appears visually similar to the others and align perfectly at the base. ...

htmlcssfontswebfonts

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

I am encountering a problem with a mat-datepicker displaying below a modal in my Angular application. Here are the key details: Html: <div class="col-12"> <mat-form-field appearance="fill"> <mat-label>Start Date ...

htmlcssangulartypescriptangular-material

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

htmlcssheight

show items in UL LI elements as "inline" within a bootstrap column

Struggling with organizing UL LI items in a bootstrap setup? Trying to make them align horizontally instead of vertically but can't figure it out. Here's my code: <div class="container-fluid" style="margin-bottom:45px;"> <div cl ...

htmlcssbootstrap-4

"Showcasing a pair of icons side by side in an HTML layout

I need assistance with formatting two legends on the form. I want both legends to be displayed side by side instead of one on top of the other. Here's how I want it: -----legendOne---LegendTwo----- What CSS code do I use to achieve this layout? Be ...

htmlforms

Issue with VideoJS functionality on iPad

When attempting to incorporate an html5 <video> tag into my Salesforce web page, I stumbled upon a fantastic library called "Videojs" (). It fulfilled most of my requirements, but I encountered a problem when trying to play a video on an iPad. This l ...

ioshtmlipadsalesforcevideo.js

Angular UI modal on close event

Is there a way to trigger a function after a modal window is closed, regardless of whether it was closed by a button click or clicking on the backdrop? var dialog, options; options = { windowClass: "lightBox" templateUrl: "url to the template", con ...

javascriptjquerytwitter-bootstrapangularjsangular-ui

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

cssreactjssemantic-uisemantic-ui-react

Transfer data dynamically between JSP pages using parameters

In my Java application, users can log in and predict football matches. I have created an admin JSP page where I retrieve all team names from a database table to set up this week's matches. Later, after the matches finish, I set the final results to co ...

javahtmljspservletsjstl

Setting a radio button as default based on a variable value can be accomplished by following a few

I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...

javascriptjqueryhtml