Tips for addressing responsiveness issues in Bootstrap 4 column layout

Currently, I am working on creating a responsive profile page with Bootstrap 4. The challenge I am facing is that when viewed on smaller screens, the content shifts to the left while the center and right sections remain empty. This issue particularly affects the columns displaying username, country, city, gender, profession, and job title. Additionally, the Follow and Message buttons are not aligned properly on mobile devices.

I have included a link to the code in the comments section.

This problem seems to be isolated to mobile devices. How can I ensure that each row displays two columns on mobile and also correct the positioning of the buttons so they appear on the same line?

twitter-bootstrapcssbootstrap-4

Answer №1

Consider using the structure provided below. It's important to note that in Bootstrap 4, the col-xs-* class is no longer valid. Instead, utilize the col-* class for mobile view styles.

Check out this Codepen link

  <section>
  <div class="container">
    <div class="emp-profile justify-content-center">
      <form method="post">
        <div class="row">
          <div class="col-md-4">
            <div class="profile-img">
              <img src="https://picsum.photos/50" alt="" />
            </div>
          </div>
          <div class="col-md-8 col-sm-12 col-12">
            <div class="tab-content profile-tab" id="myTabContent">
              <div class="row">
                <div class="col-md-4 main-col col-sm-12  col-12 d-flex d-sm-block flex-column align-items-center">
                  <h5>
                    Kshiti Ghelani
                  </h5>
                  <h6>
                    24 Years Old
                  </h6>
                </div>
                <div class="col-md-3 col-sm-6 col-6">
                  <a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>

                </div>
                <div class="col-md-2 col-sm-6 col-6">
                  <a href="#" class="btn button-image closeButton btn-message">Message</a>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Username</label>
                  <p class="ml-auto">Kshiti123</p>
                </div>
                <div class="col-6 d-flex">
                  <label>Profession</label>
                  <p class="ml-auto">Designer</p>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Gender</label>
                  <p class="ml-auto">Female</p>
                </div>
                <div class="col-6 d-flex">
                  <label>Job Title</label>
                  <p class="ml-auto">UI Designer</p>
                </div>
              </div>
              <div class="row">
                <div class="col-6 d-flex">
                  <label>Country</label>
                  <p class="ml-auto">UK</p>
                </div>
                <div class="col-6 d-flex">
                  <label>City</label>
                  <p class="ml-auto">Oxford</p>
                </div>
              </div>



            </div>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
          <div class='col-md-3 img-content'>
            <img src="https://picsum.photos/200" alt="" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-10">
            <p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
              quo minim nostro ut.
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

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

Exploring Vue and Webpack's tree shaking functionality, side effects management, and its impact on CSS: Loading unused component CSS

We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...

cssvue.jswebpackvuejs2

What steps can I take to stop a select box within a flex container from shrinking?

Currently working on some code that involves a flex container. Struggling to prevent fields from shrinking too much on smaller screen sizes. var crsdesc; //var for new window function popup(mylink) { if (!window.focus) return true; var href; if (t ...

htmlcssflexbox

Flashing text compatibility across all browsers

I'm looking for a way to create text that blinks on all major web browsers. Initially, I attempted using the <blink> HTML tag, but unfortunately, it only works in Mozilla Firefox. Next, I experimented with CSS: <style> .blink {text-deco ...

javascripthtmlcss

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

javascriptcssvue.jsquasar-framework

Display data in Bootstrap table using JQuery and JSON

Can anyone help me figure out how to populate my bootstrap table (in Database.Master) with data (in DatabaseUI.aspx.cs)? I need to dynamically add rows to the table using JQuery. Do I need to convert my string to JSON first? I believe I may have to add an ...

javascriptjqueryasp.netjsonbootstrap-4

What is the solution for setting a regular height to a Bootstrap select when no option is currently selected?

On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...

htmltwitter-bootstrapbootstrap-select

What is the best way to eliminate the border-bottom of the final div separator using CSS?

I have set up a div box to display the latest news, with each news item separated by a border-bottom. Instead of using ul li in the HTML, I am opting for simple div elements. However, I am encountering an issue where the last news item also displays the bo ...

htmlcss

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

javascriptcssreactjsmaterial-ui

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

I've been struggling to find a straightforward solution to this issue for a while now. Let me break it down - I need to display some data on the left side of a post card component with a button located right next to it. Here's an illustration: ...

cssreactjsnext.jstailwind-cssshadcnui

The upper border is missing from the middle div in the presence of three divs

I am currently working on a new project using HTML, CSS, and Bootstrap. However, I have encountered a problem. I have created a box with a border all around it, and when I hover over this box, an image appears inside of it. By default, the inside of the bo ...

htmlcssbootstrap-5

Collapse all Bootstrap accordions with a single click of a button

Is there a simple way to toggle the collapse/expand functionality of all accordions with just one button click? I attempted to achieve this by using a basic button that would remove the 'active' class and add it back, but unfortunately, it didn&a ...

javascripthtmlbootstrap-4

Place a div in a location where it seems to be positioned beyond the main wrapper's width of 980 pixels

Is there a way to position a div outside the main wrapper (980px) of my website without causing horizontal scrollbars in the 1024px screen size? I'm open to solutions using CSS or jQuery. Any suggestions? The segment that needs to be outside should ...

jqueryhtmlcssxhtml

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

javascripthtmlcssreactjs

Why isn't this basic CSS animation executing properly?

I have encountered an issue and I have created a JSFiddle to demonstrate it. http://jsfiddle.net/sqMT6/1/ Basically, when you click on a paragraph, the 'hidden' class is supposed to be set, triggering a webkit animation that makes the paragraph ...

animationcsswebkit

Creating a dynamic background image with automatic cropping techniques: How to do it?

I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...

cssimagebackgroundresponsive

``There seems to be a problem with the radio buttons where the selection disappears when

I'm facing an issue with a radio button group I created. It's functioning properly, but the selection disappears when clicked outside of the radio button. Can someone assist me in resolving this problem? Here is the link to the jsfiddle for refer ...

htmlcssradio-button

Why can't the file upload button locate its CSS styles?

Check out this jFiddle demonstrating the issue. Some of the Angular code may appear broken in the example, but that's just due to it being pasted into jFiddle; it's not an actual problem I'm facing. The CSS styles aren't working on the ...

cssangularjs

Ways to prevent text from wrapping in CSS

I'm currently in the process of creating a new website and I've encountered an issue with my CSS. It seems that whenever there is a space present, the text inside h2 tags wraps unexpectedly. You can visit the site here. Here's the specific ...

htmlcsscss-float

When the ::after pseudo element is utilized for creating a bottom border, it will display following each individual list item contained within the specified div

I have been using a pseudo-element to create a division line between sections, and it was working perfectly until I added a list of items. Now, the division line is appearing after every <strong> and <li> tag. I have tried various approaches, s ...

htmlcsspseudo-element

The hover effect does not seem to be functioning properly within the <th>

I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event. <span class='csTip fa fa-info-circle' csTipTerm=&a ...

jquerycssmodel-view-controller