Tips for resolving responsive issues in Bootstrap 4

I am currently utilizing Bootstrap 4 and have implemented the jumbotron class with the following CSS:

.rounded-circle{
    vertical-align: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: -150px;
    top: -50px;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
  <div class="container">
   <div class="row">
    <div class="col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
    </div>
    <div class="col-md-8">
    this is mobile way of the container and other line
    </div>
  </div>
 </div>
</div>

In the desktop view, my content displays correctly as shown in this link.

However, in the mobile view, the positioning is off as depicted in this image.

How can I ensure that my image and text are displayed properly on all devices (desktop, tablet, and phone), such that on smaller screens the image appears at the top followed by the description?

Here is the edited image for reference: https://i.sstatic.net/fGvzW.png

htmlcssbootstrap-4

Answer №1

Using position: absolute with col is not the correct approach here. Instead, flex-box provides the flexibility to achieve the desired behavior without using position: absolute.

To start, add the class align-items-center next to the class row (this will vertically center align).

Next, apply the class col-12 to the columns (to position the description below the image for smaller sizes).

Then, if needed, include the classes text-center and text-md-left (for left alignment on bigger screens and center alignment on smaller screens).

.rounded-circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
  <div class="container">
   <div class="row align-items-center text-center text-md-left">
    <div class="col-12 col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
    </div>

    <div class="col-12 col-md-8">
    this is mobile way of the container and other line
    </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

How can I incorporate dynamic moving lines into my website's loading sequence?

Link to Gyazo image 1: https://gyazo.com/015425f0decb187e28b620c1e3206391 Issue with first image: https://gyazo.com/dfcd33e8a4fd5bea64e51fe40556f0bf I'm currently working on a website and came up with a cool concept of having two lines crossing the s ...

htmlcss

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...

htmlcss

Adjusting dimensions using CSS

I am facing an issue where my tab names are displaying too large and I would like them to be default size. I have placed the following script in the <head>. <style type="text/css"> { font-family: Verdana; font-size:40%; } ...

jquerycss

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Tips for applying unique CSS classes to individual templates in Joomla

I manage a website at www.kadamjay.kg using an RT template system where each language version has its own unique template. However, when I add a class to a specific element, it only changes on one template and there are no additional templates in the pat ...

cssclasstemplatesjoomla

The DIV container refuses to line up properly

Despite my best efforts, I have not been able to align these 4 boxes properly after going through documentation, tutorials, and examples. div#frontpage{width:100%; } div#1{width:25%; float:left; position:relative;} div#2{width:25%; float:left; position:re ...

csshtmlcss-float

Order of execution in Single Page Applications when using multiple files: understanding the Javascript async defer concept

I am currently working on enhancing the performance of my webpage, which is built using EmberJS. One strategy I'm considering is utilizing `asyc` and `defer` attributes for our Javascript files. I have already implemented other optimizations such as ...

javascripthtmlperformanceasynchronousdeferred

In my current Next.js project, I tried setting up a new [collectionId].jsx file within the pages directory, but I am facing issues with getting

In my current next.js project, I recently created a file named [collectionId].jsx within the pages directory. Interestingly, I noticed that Tailwind CSS does not seem to work properly with this file. However, when I renamed the file to [collectionId].js wi ...

cssreactjsnext.jstailwind-css

`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...

htmlcssflexboxalignmentcentering

PHP encountered an issue while trying to compare the value stored in the $_POST variable with the value stored in a

In my current project, I have utilized a JSON file to store data and PHP to retrieve and display it. However, I am facing an issue when comparing values from $_POST - specifically, if the value contains spaces, the comparison fails. Here is the problematic ...

phphtmljsonformspost

Stop the MatSort feature from activating when the space key is pressed in Angular Material

I am currently using angular material tables and have implemented filters for each column. The filter inputs are located in the row header of each column, which is working fine. However, I am facing an issue where whenever I type and press the space key, ...

htmlangulartypescriptangular-material

The main div on my website appears completely chaotic when viewed in IE versions 7 and 8

On my website, the main div appears floated left on some pages and right on others. In certain pages, it seems to be scattered all over in IE 7 and 8 - I didn't even bother checking in IE6. However, oddly enough, it displays perfectly in IE 6. I need ...

css

What could be the reason my bootstrap cards are stacking vertically instead of being placed horizontally next to each other?

My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...

htmldjangobootstrap-4

Error: Attempted to export 'e', however it was not defined in the module (located at vite.js?v=d59cec13:236:3) - occurring in the three.js/vite combination

After dabbling in javascript, I decided to explore three.js and found it quite intriguing. However, after hours of setting everything up, I encountered a roadblock. When I attempted to create geometry and render it, the code stopped working. Upon investiga ...

javascripthtmlthree.js

Pause jQuery at the conclusion and head back to the beginning

As a beginner in the world of jQuery, I am eager to create a slider for my website. My goal is to design a slideshow that can loop infinitely with simplicity. Should I manually count the number of <li> elements or images, calculate their width, and ...

javascriptjqueryhtmlcssslideshow

Utilizing Bootstrap to create a list inside a <dd> element

Hello Universe! I'm on a quest to discover an elegant solution for presenting multiple lines of information within a tag. Right now, I have the following setup:</p> <pre><code><dl class="row"> <dt class="col-2"> ...

htmltwitter-bootstrapcssbootstrap-4

When combining Symfony, Twig, and Semantic UI, users may encounter an issue where the background image fails to display

Can someone assist me in identifying the issue with my code? I am using Symfony 2.8, Semantic UI, and Twig, attempting to set a background image on my site. The modification is being made to my base.html.twig file. I have attempted: Using different ima ...

htmlcsssymfonytwigbackground-image

Connecting ViewChild to several elements

I have implemented a feature where I am displaying tabular data in DataTable for Angular. Within this, there is a button that triggers a click event. Upon clicking the button, a slide menu is displayed, which then triggers a modal open. To achieve this fun ...

javascripthtmlangularviewchild

How can I load a URL without causing a page refresh?

While searching around, I stumbled upon this HTML 5 code snippet: window.history.pushState("object or string", "Title", "/new-url"); I started thinking: how can this be implemented? Is there a way to utilize this code to change the URL to without needin ...

javascriptajaxhtml

Why doesn't the float extend across my entire background?

One issue I am facing is with two divs in my HTML file, both set to 50% width. The left div has a fixed position while the right div should be scrolling. I have set it to float, but there seems to be a white space around the background of the floating div: ...

htmlcss