"Utilizing margins to create space between elements within a Bootstrap

I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner:

<div class="container">

  <div class="row">
    <div class="card col-md-4 col-sm-6 col-12 item-wr"  *ngFor="let item of items">
        ...
    </div>
  </div> 

</div>

When viewing on my desktop using Google Chrome, I can see 3 items in a row but there is no spacing between the columns. To resolve this issue, I added the class item-wr.

.item-wr {
    margin: 10px; 
}

However, with this adjustment, the layout breaks and I am only able to see 2 items per row, with some space on the right side of the row.

How can I maintain 3 items per row col-md-4 with space in between them?

P.S. I do not want any space at the beginning or end of each row. The first column of each row should not have a margin-left, and the last column of each row should not have a margin-right.

htmlcsstwitter-bootstrapangularbootstrap-4

Answer №1

It is important to include the card class within the col-md-4 col-sm-4 col-12 class. The col-md-4 col-sm-4 col-12 class already has its own padding and spacing, allowing you to add design-related classes within the column class.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">
    <div class="col-md-4 col-sm-4 col-12">
      <div class="card item-wr">
        ...
      </div>
    </div>
    <div class="col-md-4 col-sm-4 col-12">
       <div class="card item-wr">
        ...
      </div>
    </div>
    <div class="col-md-4 col-sm-4 col-12">
       <div class="card item-wr">
        ...
      </div>
    </div>
  </div> 

</div>

Answer №2

To achieve proper spacing in your layout with bootstrap 4, make use of padding utility classes like pr-2 which adds padding to the right by 2 spacing units. You can find more information here.

Remember that margins add space outside of the box-model while padding prevents line breaks inside the box-model. For additional tips, check out this resource.

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

Guide to implementing fullpagejs with Angular 7 selectors

I have been working on an Angular 7 project with fullpagejs by Alvarotrigo. Everything seems to be functioning properly, but I am facing an issue where the content of my website is not visible because the color of fullpagejs covers it all. When I use norma ...

angulartypescriptfullpage.js

Avoid automatic semicolon insertion in Visual Studio Code

Currently, I am utilizing Visual Studio Code for my coding tasks. I specifically do not prefer the auto insertion of semicolons after CSS properties by VS Code. However, it keeps providing me with an autocomplete option that I find undesirable. Is there a ...

cssvisual-studio-codeautocomplete

Employing bootstrap to include oversized images within a compact, fixed div

I am facing an issue with image responsiveness in the middle row of my layout. Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are ...

htmlcssbootstrap-4

Can a map key value be converted into a param object?

I have a map containing key-value pairs as shown below: for (let controller of this.attributiFormArray.controls) { attributiAttivitaMap.set(controller.get('id').value, { value: controller.get('valoreDefault').value, mandatory ...

angulartypescriptdictionary

Why is my CSS media query failing to increase font size?

I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devi ...

htmlcssbootstrap-4frontendbootstrap-5

It appears that Jest is having trouble comprehending the concept of "import type"

We've just completed a major update to our monorepository, bringing it up to date with the following versions: Nx 14.3.6 Angular 14.0.3 Jest 28.1.1 TypeScript 4.7.4 Although the compilation process went smoothly after the upgrade, we encountered num ...

angulartypescriptjestjstype-only-import-export

Display only the highest image in the picture carousel using Jquery

My goal is to create a simple image slider using HTML, CSS, and Jquery. However, when I try to move it left by 750px, only the topmost image moves and the rest of the images are not displayed. It seems like all the images are moving at once instead of jus ...

jqueryhtmlcss

What could be the reason my code isn't successfully performing addition within the input field?

As a novice, I am practicing by attempting to retrieve a number from a text field, prompting the user to click a button that adds 2 to that number, and then displaying the result through HTML. However, I keep encountering an issue where NaN is returned whe ...

javascripthtml

What is the best way to conceal padding designated for invisible scrollbars?

I am facing a perplexing problem with a nav element that always shows an empty scrollbar area, even when it is not required. Here is how it looks with all content displayed: https://i.stack.imgur.com/PzeiP.png This is how it appears when the window heigh ...

htmlcssreactjsmacosgoogle-chrome

Arrange divs in a grid layout with evenly distributed dynamic spacing

I am not a big fan of bootstrap, so I was wondering if it is possible to achieve the layout without using it. I have 6 divs that I want to arrange in 2 rows and 3 columns. I need the space between each row/column to be precise. While I can calculate this ...

javascripthtmlcssflexbox

Optimize Your Reactstrap Carousel Images for Responsiveness

Despite my extensive search efforts, I have found very limited documentation on how to make images within a ReactStrap carousel responsive to resizing. While the ReactStrap carousel itself is responsive, the images inside it do not resize accordingly. So ...

cssimagereactjsresponsive-designreactstrap

Prioritize the first child in Flexbox by truncating its text before the second

I am working with a flex-box container named .search-bar, which contains two divs with text, labeled as .title. My goal is to make the second child take up any extra space available and only start ellipsizing when there is no more space left for the first ...

cssflexboxellipsis

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

Within the Breadcrumbs section, I have the path home/profile The desired layout involves floating the Breadcrumbs to the right while keeping the Other contents unfloated to the left. Ver1 -------------------- home/profile -------------------- Ot ...

cssreactjsmaterial-ui

Entity designation experiencing operational difficulties

Having trouble converting my HTML to XHTML. Whenever I replace the greater than sign with &gt;, my if statement stops working properly. The same issue occurs when replacing the ampersand with & and the less than sign with <. Even CDATA isn' ...

javahtmlxhtml

Using Javascript's document.write function to modify the content of a PHP page

Here is a Javascript function that capitalizes the first letter of a string: function capitalizeFL(string) { return string.charAt(0).toUpperCase() + string.slice(1); } In a file named statuswindow.php, there are PHP scripts that use this function to ...

phpjavascriptjqueryhtmlajax

Vertical tab design in Bootstrap does not automatically switch tabs

I'm managing two separate tab boxes that switch content when clicked or over a 5-second period. https://i.sstatic.net/Ujz9H.jpg https://i.sstatic.net/sFc1K.jpg The left box is functioning correctly, but the right box is changing the active state wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

Trouble with Hero Unit Styles not being implemented

Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected. <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

csstwitter-bootstrap

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog

Display Image Automatically Upon Page Opening

Currently, I have an HTML file that includes the following code: <img src="(Image from file)" alt="Raised Image" class="img-raised rounded img-fluid"> I am attempting to retrieve the image from a file when the webpage loads using the server.js file ...

javascripthtmlnode.js

The browser prevented the script located at “http://127.0.0.1:5500/assets/platform.png” from loading due to an invalid MIME type of “image/png”

Sorry if this question seems repetitive, but despite extensive searching, I haven't been able to find a solution to my specific problem. I am currently working on developing a basic JavaScript game, but I'm facing challenges when it comes to impo ...

javascripthtmlcanvasmimeliveserver