Adding space between Bootstrap columns to align them one below the other on small devices

Question

Adding space between Bootstrap columns to align them one below the other on small devices

https://i.sstatic.net/turhY.png

Within this illustration, there are two columns - one with the class col-sm-3 and the other with col-sm-8, situated in a single row.
Upon resizing the window (as shown in the screenshot provided), the two columns appear to be glued together. Moreover, the second column (col-sm-8) does not expand to its full width at the breakpoint for small screens.

Note: I aim to maintain spacing between the columns at the small screen breakpoint, while also ensuring that the col-sm-8 column occupies the entire available space.

Link to Bootstrap code

html css bootstrap-4

Answer 1

Answer №1

To make the col-sm-8 full width with space between columns at the sm breakpoint, you just need to add a class.

Add the following class below the col-sm-8 div only:

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

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

   ... (continued styling and HTML code)
   
  </body>
</html>

Answer 2

To make the col-sm-8 full width with space between columns at the sm breakpoint, you just need to add a class.

Add the following class below the col-sm-8 div only:

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

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

   ... (continued styling and HTML code)
   
  </body>
</html>

Answer 3

Answer №2

To adjust the layout at a specific screen size, you can apply some margin using a breakpoint like this:

@media screen and (max-width: 576px) {
  .col-sm-8 {
    margin-top: 30px;
  }
}

The term sm signifies small in bootstrap, which triggers at 576px.

This article provides a thorough explanation

Expanding Width

If you want the final div to occupy the entire width, check why it doesn't initially by inspecting it.

https://i.sstatic.net/kU3Sw.png

It's evident that there is padding on each side - padding: 15px. You can eliminate this in a certain breakpoint to retain the space in larger resolutions.

@media screen and (max-width: 576px) {
  .col-sm-8 {
    padding-left: 0;
    padding-right: 0;
  }
}

Your original code now includes the new modifications

Codepen demo

Answer 4

To adjust the layout at a specific screen size, you can apply some margin using a breakpoint like this:

@media screen and (max-width: 576px) {
  .col-sm-8 {
    margin-top: 30px;
  }
}

The term sm signifies small in bootstrap, which triggers at 576px.

This article provides a thorough explanation

Expanding Width

If you want the final div to occupy the entire width, check why it doesn't initially by inspecting it.

https://i.sstatic.net/kU3Sw.png

It's evident that there is padding on each side - padding: 15px. You can eliminate this in a certain breakpoint to retain the space in larger resolutions.

@media screen and (max-width: 576px) {
  .col-sm-8 {
    padding-left: 0;
    padding-right: 0;
  }
}

Your original code now includes the new modifications

Codepen demo

Answer 5

Answer №3

To start, Bootstrap margin properties can be utilized. I suggest considering mb-3 (margin-bottom-3) or mt-3 (margin-top-3) for your needs in this case.

It is also possible to add margins with pure CSS when the width exceeds a certain value, X pixels for instance.

For instance:

@media screen and (max-width: 640px) {
    .do_margin_bottom {
        margin-bottom:20px; /* Similar to mX-3 */
    }
}

Subsequently, apply the .do_margin_bottom class to your col-sm-3 element.

Regarding the second point: Your col-sm-8 appears correctly aligned, as does your col-sm-3. The issue lies in the div.card element adding margin-left:15px & margin-right:15px. Adjust these values on your card element to achieve the desired spacing.

I personally advise against removing these margins. A card without any margins may appear unusual.

Answer 6

To start, Bootstrap margin properties can be utilized. I suggest considering mb-3 (margin-bottom-3) or mt-3 (margin-top-3) for your needs in this case.

It is also possible to add margins with pure CSS when the width exceeds a certain value, X pixels for instance.

For instance:

@media screen and (max-width: 640px) {
    .do_margin_bottom {
        margin-bottom:20px; /* Similar to mX-3 */
    }
}

Subsequently, apply the .do_margin_bottom class to your col-sm-3 element.

Regarding the second point: Your col-sm-8 appears correctly aligned, as does your col-sm-3. The issue lies in the div.card element adding margin-left:15px & margin-right:15px. Adjust these values on your card element to achieve the desired spacing.

I personally advise against removing these margins. A card without any margins may appear unusual.

Adding space between Bootstrap columns to align them one below the other on small devices

Answer №1

Answer №2

Answer №3

Similar questions

Creating a stunning effect with radial-gradient on an image element

Switch between Light and Dark Modes effortlessly with just one button

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

Hover over the image with some padding placed around it to see

Unable to insert menu links into the container

Weather Application featuring Circular Slider

What causes the Top Navbar in Twitter Bootstrap to exceed the container when fixed?

Tips for presenting HTML source code with appropriate tag coloring, style, and indentation similar to that found in editors

Looking to extract latitude and longitude data using an Autocomplete Address Form

Is it possible to generate a PNG blob using binary data stored in a typed array?

V-model prevents checkbox from being checked upon clicking

Step by step guide to showcasing images dynamically in user interface

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

Experience the magic of CSS Sprite once it's been successfully uploaded!

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

React fails to display the content

The chat text will automatically scroll down, displaying information loaded from the database

Place the cursor at the conclusion of the text box

Issue with the image posting function in Laravel - why isn't it functioning properly?

Issue with compiling Tailwindcss in nextjs JIT mode