How can I apply column spacing specifically for both desktop and mobile devices using only Bootstrap 4?

I am struggling to create a 15px gap between two rows and columns on both desktop and mobile using bootstrap. I know there is something with margins, but I can't figure out the best way to implement it.

For the second row, I want two columns to appear side by side on tablets or larger screens, and stack vertically on smaller devices like mobile. However, setting the gaps correctly only on mobile devices is proving challenging.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gap</title>
  <link 
   rel="stylesheet"         
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin="anonymous" />
</head>

<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-12 p-3" style="
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      ">
        B
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-6 p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        A
      </div>
      <div class="col-xs-12 col-sm-6 p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        C
      </div>
    </div>
  </div>
</body>

</html>

htmlcssbootstrap-4

Answer №1

To achieve what you're looking for, a simple adjust in B4 is all it takes. In that version, applying any margin to the columns will disrupt the layout completely. The solution is to avoid adding a margin directly to it, but instead use an inner enclosing div. This approach yields the same result. Your updated code would look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Gap</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    </head>
    <body>
        <div class="container mt-5">
            <div class="row mb-3">
                <div class="col-12 p-3" style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">
                    B
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 px-0">
                    <div class="inner p-3 mb-3 mb-sm-0 mr-sm-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
                        A
                    </div>
                </div>
                <div class="col-sm-6 px-0">
                    <div class="inner p-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
                        C
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

JSFiddle

A similar outcome can be achieved effortlessly using g-* classes on the row in B5.

Edit: Additionally, please note that in Bootstrap, *-3 defaults to 16px. By default, there isn't anything that corresponds to 15px here. You would need to create a custom class, or if utilizing SASS, you can append another value like 15 (representing 15px) to the margin utility in Bootstrap, resulting in something like mb-15, equivalent to margin-bottom: 15px;. Utilities API

Answer №2

If you're aiming to create space on mobile devices, simply incorporate mb-4 mr-4. On the other hand, if you wish to eliminate those spaces on bigger screens, implement mb-md-0 mr-md-0 or adjust it based on your preferred breakpoint.

Answer №3

One approach I've taken is to adjust the margin in containers A, B, and C using CSS properties like margin-top and margin-bottom. By utilizing flexbox for the layout of the columns, I can create a consistent gap between them without relying on margins alone. Instead, I introduce an empty container to serve as the gap, ensuring a uniform spacing that may not be exactly 15px as intended.

For more information, I referenced:

  1. Bootstrap - Flex
  2. Box Model, inc. Margin
  3. Bootstrap - Spacing
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gap</title>
  <link 
   rel="stylesheet"         
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin="anonymous" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 p-3 mb-4" style="
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      ">
        B
      </div>
    </div>

    <div class="row d-flex justify-content-sm-between mt-2">
      <div class="col-xs-12 col-sm p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        A
      </div>

      <div class="col-sm-1 p-3">
      </div>

      <div class="col-xs-12 col-sm p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        C
      </div>
    </div>
  </div>
</body>

</html>

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

PHP implementation for a static header layout

I am interested in learning how to update content without refreshing the header. I have created a simple example below. Header.php <html> <head> </head> <body> <ul> <li><a href="index.php" ...

javascriptphpjqueryhtml

What are the steps for utilizing CSS Global Variables?

Hey there, thank you for taking the time to help me out. I'm having a simple doubt that I just can't seem to figure out. So... here's my '/pages/_app.js' file: import '../public/styles/global.css'; export default funct ...

javascriptcssnext.js

Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on: /* valuecanvas */ #wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; bac ...

htmlcss

Adjust div to match the width of the image

My portfolio page features an image display with zoom functionality. Here is the code I am currently using: http://codepen.io/Mpleandro/pen/LvrqJ The division that showcases the image has a class called .display, located on line 13 of the HTML file and CS ...

cssresponsive-designimageinheritance

A comprehensive guide to effectively formatting Recharts in React: addressing alignment and size management!

While attempting to style two graphs as floating cards, I am encountering difficulties in controlling the sizing and centering of the graphs. Specifically, I am having trouble with the pie chart in this example. To address this issue, I am passing paramete ...

javascriptcssreactjsrecharts

What are your preferred HTMLPurifier configurations for sanitizing CSS styles?

I'm currently in the process of developing an application that allows users to input their own custom CSS for their profiles, similar to platforms like MySpace, Friendster, and Blogger. However, I'm struggling to find an effective method to prot ...

phpcsshtmlpurifierxss

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

Utilize a single CSS class or theme to style multiple boxes within a stack - Material-UI

I'm currently diving into the world of React js and MUI components. I'm in the process of creating a stack with multiple boxes, each with its unique style that's consistent across all boxes in the stack. Is there a simpler way to define one ...

cssreactjsmaterial-ui

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

What could be causing the sudden glitch in my sidebar animation?

I'm encountering issues with the sidebar opening smoothly. The width of the column seems to change as it opens and there's a choppy jump. I've attempted to resolve this by applying transitions to the CSS and using flex-grow / shrink. Unfort ...

htmlbootstrap-5

Ways to place two anchor tags side by side within a list item contained within a justified navigation tab

I'm currently working with some nav-tabs and attempting to place two a tags within one of the li elements that represent a tab. However, I'm facing an issue where the a tags are appearing on separate lines. I've tried using inline styling fo ...

htmlcsstwitter-bootstrapfont-awesome

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

javascripthtmlbash

Manipulating visibility of an input tag using JQuery

Having a simple input tag: <input id="DAhour" type="number" style="width:50px; font-size: xx-small; visibility:hidden"> Initially, the input tag is set to be hidden. Upon changing a combobox to a specific index, it should become visible. Despite su ...

javascriptjqueryhtml

Transfer information from the client to the server using AJAX and PHP by

When attempting to post a JavaScript variable called posY to a PHP file, an error occurred with the message: Notice: Undefined index: data in C:\xampp\htdocs\Heads_in_the_clouds\submitposY.php The posY variable is defined in the JavaSc ...

javascripthtmlcanvas

Express will be used to return empty values to an array

I am currently in the process of learning how to use express, so I am relatively new to it. I am facing an issue where I am trying to send data from a form I created to an array, but unfortunately, it is adding empty values to the array. The values are dis ...

htmlnode.jsexpressejs

Which is better for decorating logo text - CSS3 or Jquery?

I've been attempting to achieve this design using CSS without much success. The goal is for the entire logo to scale using fittext.js while looking visually appealing. However, I keep encountering obstacles that prevent me from achieving my desired re ...

javascriptjquerycss

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

I am attempting to show the email entered in the email input field in a validation message. The input field also checks my database for registered emails and displays a message based on the outcome. I then included this code from a source. What happens is ...

phpjqueryhtml

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

javascriptcssreactjs

Utilizing numerous buttons with the simultaneous activation of their :active state

.a { background-color: white; } .a:focus { background-color: green; } .b { background-color: yellow; } .b:focus { background-color: blue; } <button class="a">1</button> <button class="a">2</button> <button class="b"> ...

htmlcssbuttonpseudo-class

Obtain the text value from an HTML button in JSP code

Here is an HTML tag that I have: <button type="submit" name=<%=s %> value=<%=s %>><%=s%></button> The <%=s %> represents a String with white spaces stored on the server, such as "file one". I am facing an issue with e ...

javahtmljsp