What is the best way to add space between div elements with bootstrap classes?

For my project, I am utilizing bootstrap and I need to create space between divs. Here is the code I am using:

<div className="container">
   <div className="row">
      <div className="col-lg-4 col-md-4 col-sm-12 col-12 box">a</div>
      <div className="col-lg-4 col-md-4 col-sm-12 col-12 box mr-1 ml-1">b</div>
      <div className="col-lg-4 col-md-4 col-sm-12 col-12 box">c</div>
   </div>
</div>

The issue I'm facing is that the margin is not pushing the other divs and breaking the row layout. In essence, the margin is not being applied correctly.

How can I properly add margin between these divs?

cssbootstrap-4

Answer №1

To resolve the issue of margins, I implemented a solution by introducing an additional div within all existing divs in the following manner: 

<div className="container">
                <div className="row">
                    <div className="col-lg-4 col-md-4 col-sm-12 col-12 ">
                        <div className="box ml-1 mr-1">a</div>
                    </div>
                    <div className="col-lg-4 col-md-4 col-sm-12 col-12 ">
                        <div className="box ml-1 mr-1">b</div>
                    </div>
                    <div className="col-lg-4 col-md-4 col-sm-12 col-12 ">
                        <div className="box ml-1 mr-1">c</div>
                    </div>
                </div>
            </div>

As a result, each of the three divs now displays the desired margins.

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

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible

Is it feasible to generate a realistic arrow using CSS and then rotate it?

Can a fully functional arrow be created using CSS alone? Here is the method I used to create just the arrowhead: http://jsfiddle.net/2fsoz6ye/ #demo:after { content: ' '; height: 0; position: absolute; width: 0; border: 10p ...

css

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...

javascriptcssvue.jsdialogprimevue

Exploring HTML and CSS backgrounds

I am new to CSS and I have a question regarding design. I want to create a form in the center of my webpage (shown as the black box) with a white background that overlaps the body background (represented by the red lines). For reference, please view this ...

htmlcss

Ways to incorporate style links in Angular v2 components?

Currently, I am working through the Angular tutorial available on their website. In my quest to create various components, templates, and styles, I have hit a roadblock. The issue lies in incorporating my styles into the components using the 'styleUR ...

cssangularangular-components

The Dropdown Button Functions Once and Then Stops

I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...

javascriptjqueryhtmlcss

Expand the width of columns in a Bootstrap 4 table

I have been trying to adjust the width of the columns in my table without success. I've attempted using percentage, pixels, and rems, but none of these methods seem to be working. Interestingly, I am able to adjust the column width when there are a sm ...

htmlbootstrap-4

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

Currently, I'm in the process of developing an analog clock for a project using Angular. My challenge is figuring out how to dynamically update the sec/min/hour handlers on the clock based on the current time by manipulating the style.transform prope ...

htmlcssangulartypescriptcss-transforms

I am looking to implement a feature in my quiz application where a green tick mark appears next to the question number for the correct answer and a red cross mark for the wrong answer

My HTML code here retrieves questions from a database and displays them based on the question number. <h4>{{indexOfelement+1}}</h4>&nbsp;&nbsp; In my CSS, I need to style the questions as follows: How can I achieve this? Each question ...

cssangular

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

javascripthtmlcssfont-size

block height has become a constant challenge for me - despite my various attempts, I still cannot seem

Struggling with adjusting the height of my posts. Any help would be appreciated! For more details, please visit: <li> <div class="thumb-img"> <a title="Hiring a Professional Designer for Your Kitchen" href="http://www.mulberrydesignerkitc ...

htmlcss

Mastering the Art of Harnessing External Templates in Meteor Mantra

I have been diving into the Mantra style guide () in order to integrate it with meteor. What confuses me is determining the "right" approach for using external templates with meteor and mantra. Specifically, I'm unsure about handling CSS and JS files. ...

cssmeteorimportpackagemantrajs

In Angular 10, the custom CSS URL is loading after the standard styles.css file

Below is the configuration from my angular.json file: "options": { "outputPath": "dist/example", "index": "src/index.html", "main": "src/main.ts", ...

cssangularsassangular10

The table printing settings are not compatible with portrait and landscape orientations

I am facing an issue with printing a table on my webpage. When I try to print using Control+P or window.print();, the width of the table does not adjust properly for portrait or landscape orientation. The table ends up exceeding the paper width. How can I ...

htmlcsshtml-tablemedia-queries

Tips for arranging headers next to each other on a restaurant menu

I'm currently working on a website for a local restaurant, my very first project of this kind. As I draft the menu section, I'm struggling with displaying Starters and Main Courses side by side on the screen. Additionally, the layout falls apart ...

htmlcssflexboxbootstrap-4

What is the best way to incorporate CSS into JavaScript code?

Here is the code I am working with: <script type = "text/javascript"> function pic1() { document.getElementById("img").src = "../images/images/1.png"; } function pic2() { document.getEl ...

javascriptjqueryhtmlcss

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

javascriptjqueryhtmlcsswordpress

The onload event for windows does not fire

I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...

javascriptjqueryasp.netcsstabs

"Hover over the image to see it enlarge and reveal text displayed on top using CSS3

I have been working on creating a responsive image page for my website. I've managed to make the images responsive and centered, no matter the size of the browser window. However, I encountered an issue where when I hover over an image, it enlarges a ...

javascripthtmlcss

Adjusting the size of the post title's font

Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...

cssfrontendjekyllscss-lint