Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue?

<div class="row">
    <!-- Location -->
    <div class="col-sm-6">
        <div class=""><i class="fas fa-map-marker-alt font-14 mr-3"></i> From</div>
    </div>
    <div class="col-sm-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Country</span></div>
    </div>
</div>
<div class="row">
    <!-- Joined -->
    <div class="col-sm-6">
        <div class=""><i class="fas fa-user-alt font-14 mr-3"></i> Member since</div>
    </div>
    <div class="col-sm-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Mon Year</span></div>
    </div>
</div>
<div class="row">
    <!-- Jobs Done -->
    <div class="col-sm-6">
        <div class=""><i class="fas fa-check-circle font-14 mr-3"></i> Jobs Done</div>
    </div>
    <div class="col-sm-6">
        <div class="text-right"><span class="font-700 mr-3">Number</span></div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Check out this snippet: 

<div class="row">
    <!-- Location -->
    <div class="col-6">
        <div class=""><i class="fas fa-map-marker-alt font-14 mr-3"></i> From</div>
    </div>
    <div class="col-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Country</span></div>
    </div>
</div>
<div class="row">
    <!-- Joined -->
    <div class="col-6">
        <div class=""><i class="fas fa-user-alt font-14 mr-3"></i> Member since</div>
    </div>
    <div class="col-6">
        <div class="text-right mb-3"><span class="font-700 mr-3">Mon Year</span></div>
    </div>
</div>
<div class="row">
    <!-- Jobs Done -->
    <div class="col-6">
        <div class=""><i class="fas fa-check-circle font-14 mr-3"></i> Jobs Done</div>
    </div>
    <div class="col-6">
        <div class="text-right"><span class="font-700 mr-3">Number</span></div>
    </div>
</div>

Answer №2

Column small works only when the screen is at least 576px wide, so consider using col-6 for all screen sizes instead.

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

Updated INNER header and footer - unrelated to the answered questions

After observing, the inner-header and inner-footer div scroll along with the area that contains the select list. How can I make that area scroll down while keeping the inner-header/footer fixed within the content? I hope my query is understandable. Thank ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Tips for adjusting the size and position of these div containers

My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my probl ...

htmlcss

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Recently, we implemented Bootstrap 4 and the Flex model at my company. We'v ...

cssflexboxbootstrap-4autoprefixer

Click on the link to return to the previous page on the website

As I work on customizing a Tumblr theme, I find myself facing a few challenges. One such issue is my desire to include a link on post pages that directs users back to the previous page, similar to what is shown in this image: picture1 I have attempted var ...

html

Unexpected Type Error: Unable to Assign 'Render' Property to Undefined

At the moment, I am encountering these specific issues: An Uncaught TypeError: Cannot set property 'render' of undefined The element #main cannot be found This is the code that I currently have. Despite looking for solutions from various sourc ...

javascripthtmlcssvue.js

increasing the size of a particular text box above the rest

Just starting out with bootstrap and trying to figure out how to make one text box larger than the others. See my code below: <div class="row"> <div class="col-md-2"> <mat-form-field > <input matInput pla ...

cssbootstrap-4

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Tips for centering a horizontal unordered list within a division element

I can't seem to figure out why the text-align center isn't working. I've followed other tutorials and applied the textalign: center to the div, then added display: inline to the ul. Below is a sample of my HTML code from the browser as I am ...

htmlcsswordpresstwitter-bootstrap

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow

A Comprehensive Guide on Creating an Expansive HTML Textbox Covering the Entire

<form method="post" class="mobile-login-form _5spm" id="u_0_0" novalidate="1" data-autoid="autoid_1"> <input type="hidden" name="lsd" value="AVpe_Wp1" autocomplete="off"> <input type="hidden" name="charset_test" value="€,´,€,´, ...

htmlcss

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

I have a basic HTML file with a Bootstrap form, along with a simple API coded within. In my server.js file, I've specified that when I request /about, it should redirect me to the about.html page. However, instead of redirecting, I'm encountering ...

javascripthtmlnode.jsexpressejs

Interacting with a card in vuejs won't trigger any action

Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected? <div ...

javascripthtmlcssvue.js

Looping through color transitions upon hover using CSS

I am trying to create a color transition effect on hover, where the background changes from yellow to red and then back to yellow in a loop. I'm having trouble figuring out how to make this transition repeat continuously. Do I need to incorporate Java ...

javascripthtmlcssvisual-web-developer

Equal height elements - Bootstrap

Is there a way to make all elements in a list the same height, even if one element has more text than the others? I've been using divs for this purpose, but I'm open to switching to li items. Any advice on the best approach? I'm currently w ...

htmlcsstwitter-bootstrap

Adding a MySQL-PHP combination programmatically

Currently, I am working on a custom HTML page that sends data to PHP variables which are then utilized to generate customized SQL queries. function load_table($db, $old_table, $startRow, $nameColumn, $ipColumn, $addressColumn, $cityColumn, $stateColumn, $ ...

phpmysqlhtmlsql

Iterating over a table and selecting a specific button on the rows that meet a specific condition

I'm having a bit of trouble and would really appreciate your help. I'm attempting to write a script that will scan through this table and delete any row that contains the word "active". The script needs to check every row in the table. The code ...

pythonhtmlseleniumpytest

Position the text to the right of the div or image and allow

My attempt to align the lorem ipsum sample text next to the image and div container by setting the float to right has not been successful. The text still remains below the image. Click here for visual reference Appreciate any help in advance. #outer { ...

htmlcss

I am having trouble aligning the unordered list in the center

My struggle lies in centering the ul element which serves as a menu. Despite trying various CSS properties such as margin: 0 auto;, text-align: center;, and adjusting the margin value, I am unable to achieve the desired result. This is the CSS code I have ...

htmlcss

Implementing a Standardized Template for Consistent Design and styling Throughout Website

As I work on building my website, I find myself struggling with some of the intricacies. The homepage is set up with a navbar and header, along with several pages that can be easily navigated to. While everything seems to be functioning properly, upon ins ...

javascripthtmlcss

Tips for organizing wells within bootstrap into separate columns

Looking for a way to organize my well list into two separate columns. I've included a link to my Plunker project here: https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview. Below is the view section: <div class="well well-lg" ng-repeat="(key, d ...

cssangularjstwitter-bootstrapangular-ui-bootstrap