mobile device experiencing issues with bootstrap d-flex alignment

I have a parent div with three nested divs structured like this:

.button-class {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  margin-left: 45rem;
}

.svg-class {
  margin-top: 1rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202766c74">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-flex mb-3">
  <div class="mr-auto p-2">
    <h2>text</h2>
  </div>
  <div class="button-class p-2">
    <ion-button></ion-button>
  </div>
  <div class="svg-class p-2">
    <svg></svg> //code
  </div>
</div>

The issue I'm facing is in aligning the elements in a specific way. I want a text on the left, and a button along with an info symbol on the right. On mobile, I want the text and the button + info symbol to stack vertically. However, my current implementation is causing them to display side by side even on mobile screens.

Despite trying various bootstrap classes and CSS flexbox properties, I'm unable to achieve the desired layout for both larger and smaller screens.

https://i.sstatic.net/qMWTM.jpg

Any help or suggestions on achieving this layout would be greatly appreciated. I have experimented with different approaches but cannot seem to find a solution that works well for all screen sizes.

EDIT:

One approach I tried was using CSS flexbox with flex-grow properties for the child elements. However, I encountered issues in styling the SVG element independently. Any insights or advice on resolving this styling problem would be valuable.

htmlcssangularbootstrap-4flexbox

Answer №1

I implemented the design you provided in your sketch with a few changes for demonstration purposes. The classes I used will suit your needs perfectly.

Bootstrap in this version does not include specific classes for extra small (xs) devices. However, you can utilize flex-sm-row and flex-column classes to ensure responsiveness. By using flex-sm-row to maintain a horizontal layout on small screens and up, and flex-column to stack elements vertically on extra small screens (<576px), you can achieve the desired effect.

To center your h2 text on mobile devices, I included text-center or text-align: center;. I also made some adjustments to your markup. Simply resize the browser to less than 576 pixels to view the mobile layout. See the CSS and HTML modifications below:

img {
  width: 30px;
  height: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303776d756d72">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-flex flex-sm-row flex-column justify-content-between">
  <div class="wrapper">
    <h2 class="text-center">text</h2>
  </div>

  <div class="d-flex mr-2 justify-content-center align-items-center">
    <div class="button-class">
      <button class="mr-3">Button</button>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/%3Fuestionmark_encircled.svg/1280px-%3Fuestionmark_encircled.svg.png">
  </div>
</div>

Answer №2

Insert the following code within the head tag of your HTML document.

<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</head>

This script is optimized for mobile devices.

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 is the correct way to refer to "this" within an Angular2 component template?

I'm working with an Angular2 component that looks like this: class A { filter(..) } Within the template for A, I have <.. list | pipe:filter ..> The issue arises when I call filter inside of the pipe - I don't have access to "this" w ...

angular

Tips on managing ajaxStart and ajaxStop events the Angular2 way

I am seeking a way to trigger events similar to JQuery's ajaxStart and ajaxStop. While I found a partial solution on how to set default HTTP headers in Angular 2 here, I have managed to handle the ajaxStart event for now. Does anyone have any soluti ...

javascriptajaxangularangular2-http

How do I repeatedly invoke a function in JQuery that accepts two different arguments each time?

I have a collection of folders, each containing various images. The number of pictures in each folder ranges from 8 to 200. Folders are numbered from 1 to 20 and the images within them are also labeled numerically. My goal is to aggregate all these images ...

javascriptjqueryhtml

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

Unable to find a solution for 'thrift'

After installing thrift on my Windows 10 machine, I attempted to run an Angular service that utilizes thrift generated files. In the package.json file, I included: "@types/thrift": "^0.10.9", "thrift": "^0.13.0", but every time I try to run it, I e ...

node.jsangularthrift

PHP does not seem to be compatible with Ajax

I attempted to utilize ajax for inserting data into my database, but it was unsuccessful. To troubleshoot, I created a basic call to a PHP file which also failed: Below is the HTML code snippet: <form> <h4 class="header-title m-t-0 m-b-30"& ...

phpjqueryhtmlajax

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

javascriptjqueryhtmlcss

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it. I tried implementin ...

javascriptjquerycss

Save the outcome of an ArrayBuffer variable into an array within a Javascript code

I'm in the process of developing an offline music player using the HTML5 FileReader and File API, complete with a basic playlist feature. One challenge I'm facing is how to store multiple selected files as an ArrayBuffer into a regular array for ...

javascriptarrayshtmlarraybuffer

Is it possible to validate link clicks and integrate PHP within JavaScript functions?

Before anyone mentions security concerns, please refrain. Imagine I have an index.php. This page contains several links to 'home.php', each with different data stored in the href attributes. For example: Link 1: 'home.php?data=1&count ...

javascriptphphtmlsecurity

Effortlessly move and place items across different browser windows or tabs

Created a code snippet for enabling drag and drop functionality of elements within the same window, which is working smoothly. var currentDragElement = null; var draggableElements = document.querySelectorAll('[draggable="true"]'); [].forEach ...

javascripthtmlcss

What is the correct way to utilize Microdata fields?

I'm finding the process of creating a list of events on a page to be a bit perplexing. Does the URL in this example represent the current page or another page you are mentioning? <div itemscope itemtype="http://data-vocabulary.org/Person"> H ...

htmlmicrodata

Ways to automatically close the external window upon logging out in Angular 12

I have successfully created an external window in my Angular application. Everything is working as expected, but I am facing an issue when trying to automatically close the external window upon user logout. Although I have written the code below and it wo ...

javascriptangularangular12

The functionality of Angular Material Chip is encountering issues when paired with Angular 7

Issue with Angular Material Chip module compatibility in Angular version 7 Tech: Using Angular version 7, angular cli, and angular material Desired Outcome: Looking to successfully implement the angular material chip module Steps taken so far: Insta ...

angularangular-materialangular-cliangular7

The hamburger menu functions properly on the homepage but is not working on the individual about page

The burger menu was causing issues initially due to a simple spelling mistake, which I only noticed later. However, the current issue seems more complex. I am now creating separate pages for different sections of my website, such as About Me, Education, et ...

javascripthtmlcsshamburger-menu

The tooltip popup does not appear within the nz-tabs

Looking to enhance my two tabs with an info icon preceding the tab text, along with a tooltip popup that appears when hovering over the icon. Despite trying different methods, I have yet to achieve the desired outcome. <nz-tabset [nzLinkRouter]=&qu ...

javascriptangulartabspopuptooltip

What is the correct way to reset the styling of a web browser element, such as a <button>?

I have come across many sources advising me to reset HTML by manually resetting numerous individual properties, as demonstrated here: https://css-tricks.com/overriding-default-button-styles/ Another approach I discovered in CSS is simply using: button: {a ...

javascripthtmlcss

Putting a Pause on CSS Transition using jQuery

I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...

javascriptjqueryhtmlcss

Issue: Angular 7 unable to route directly to URL with specific ID

When I click on the navigation link with code for button click, it works perfectly fine: this.router.navigate(['/dashboard', this.selectedDateString]); However, if I manually type the URL into the address bar like this: I receive a forbidden! ...

angulartypescriptangular2-routing

Creating custom components that encapsulate the functionality of Angular Material tabs component

I am aiming to incorporate the Angular Material tabs component within my shared components. Here is the component I'm attempting to wrap: Note: Each tab can display a component: <mat-tab-group> <mat-tab label="First"> Content ...

angulartypescriptangular-materialfrontendng-content