Excessive Margins in Bootstrap on Mobile Devices

After attempting to create a webpage using Bootstrap 3.3.6, everything looked good on my laptop. However, when I tried to view it on mobile devices using Chrome and other browsers, there was a significant offset issue.

Current situation:

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

Desired outcome:

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

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
           Some content...
        </div>
        <div class="col-md-3">
           Some content...
        </div>
        <div class="col-md-3">
           Some content...
        </div>
    </div>
</div>

I even attempted to use 

<div class="container">
, but the issue persisted.

Here is the meta tag used:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

csstwitter-bootstrap

Answer №1

Bootstrap emphasizes responsiveness, requiring adherence to its conventions for optimal results. When designing for mobile devices, use the col-xs-x class instead of col-md-x which is for medium screens. For example, a div with class="col-xs-6 col-md-3" will display as 6 columns on phones and 3 columns on desktops.

To learn more, it's recommended to consult the documentation available at http://getbootstrap.com/css/

Highlighted excerpt:

The Bootstrap 3 grid system offers classes for xs (phones), sm (tablets), md (desktops), and lg (larger desktops). Combining these classes allows for creating versatile and adaptable layouts.

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

The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver. I susp ...

htmlcss

When the window is resized, the div containing a table is getting pushed beyond its original

I have been developing a 'calculadora de creditos' or credits calculator. For this project, I used a responsive layout. Despite searching extensively online for solutions to my issue, I came up empty-handed. CSS CODE: (CSS code here) HTML CO ...

csshtmlhtml-tablefluid-layout

Can a PHP variable be passed along with a div ID in any way?

I am attempting to transfer a PHP value through the "href" attribute from one div to another. While we can achieve this between pages, like so: <a href="somepage.php?id=<?php echo $id;?>"></a> Is there a way to accomplish this using an ...

phphtmlcss

Facing difficulties in retrieving my static files with Express and Node.js

I'm puzzled as to why express isn't able to access my static file to display my CSS. Here is the code snippet from express.js: app.use(express.static(__dirname + '/public')); Contents of style.css: <style type="text/css"> bod ...

cssnode.jsexpress

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

javascripthtmlcss

Is there a way to modify the styling for ListItemButton specifically when it is in a selected state?

My first experience with MUI involves trying to customize the styling of a button. After installing my project with default emotion as the styling engine, I attempted to override the existing styles using the css() method mentioned in the documentation: ...

cssreactjsmaterial-ui

Rotating arrows enhance the functionality of the accordion menu

I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue: When I collapse one item and then try to collapse another, the previous arrow does not return to its default state. Is ...

javascriptjqueryhtmlcssaccordion

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

The child element with a minimum height of 300 pixels is failing to inherit the height of its parent

Here is the HTML code for a div block I am working with: <div className={'row ge-container'}> <div className={'a-span3 ge-container-navigation'}> hello </div> <div className={'a-span9 ge-containe ...

css

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

htmlcsstwitter-bootstrapbootstrap-4

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Currently, I am utilizing a template with multiple pages and I need to use one of them. I followed all the necessary steps correctly, but I encountered an error in the console that says Uncaught ReferenceError: jQuery is not defined. Below is my HTML scrip ...

javascripthtmljquerycss

What is the method for customizing the background color in a .vue file using Bootstrap?

Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...

htmlcssvue.jsvisual-studio-code

Encountering a problem with the Batarang tool while constructing a MEANJS demo (Uncaught TypeError: Unable to access property 'getToggleElement' of null)

Trying to utilize the AngularJS Batarang while learning to create a MEANJS App. You can find the tutorial here: Noticing that my "Scopes" tab appears differently compared to the tutorial video and an error is displayed. Here is what I see in my Batarang ...

angularjstwitter-bootstrapmeanjsbatarang

What is the best way to add a gradient effect to my image? (link)

All the details are provided in this JSFiddle. Apologies, I am unable to display the link here. It can be found in the comments section! I'm facing difficulty achieving a red gradient over the image.. ...

htmlcssgradient

How can I implement changing the page background color based on different routes in ReactJS and React Router?

Is there a way to change the background color of the browser when navigating to a new route in ReactJS and React Router? Check out my tips below that I discovered during my experimentation: I have managed to implement this on individual page views using & ...

jquerycssreactjs

Modify the color of the select element when it is in an open state

If you're new to Material UI, I have a select element that I would like to change the color of. When 'None' is selected, I want the background color of the input field above it to match the 'None' section. Then, when the dropdown m ...

javascriptcssreactjstypescriptmaterial-ui

A function that listens for the onmouseover event and updates the image source of an HTML img element

I have created a function that positions my objects based on the array they are assigned to. For example, if they are in players[0], they will be placed in one position, and if they are in players[1], they will be placed elsewhere. The X and Y values are ...

javascripthtmlcss

What could be causing my Material UI Table to disappear when I toggle the "Show" option?

I am incorporating the Grow material ui component to display or hide a table. Initially, the table is visible. https://i.sstatic.net/0OxPQ.png <Box className={classes.object_controls_wrapper}> <Box sx={{ display: "flex" }}> ...

cssreactjsmaterial-uimaterial-table

Here's a unique version: "A guide on using jQuery to dynamically adjust the background color of table

I need some assistance with changing the background color of td elements based on the th class. Specifically, I want to target all td elements under the bots class in the HTML code provided below. <table border="1" class="CSSTableGenerator" id="myTab ...

javascriptjqueryhtmlcss

Keep label at the forefront once input field is completed

Is it possible to keep my label positioned on top of the input field even after filling in data? I attempted using the valid function in CSS, but did not achieve the desired functionality. .txt_field input { width: 100%; padding: 0 5px; height: 4 ...

htmlcss