Tips for styling inside containers with margins between elements without affecting their position on the page

I have three items enclosed in a container with a background color and padding applied. However, when I try to add margin between them, the elements shift to the next row.

.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
  //margin-right: 10px; Causes line break.
}

Link to JsFiddle Demo

@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');

/* GLOBAL STYLES
-------------------------------------------------- */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #231123;
  background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}



.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

     <div class="container marketing">
<div class="row">
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text1</h2>
            <p>Paragraph1 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text2</h2>
            <p>Paragraph2.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text3</h2>
            <p>Paragraph3</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->
        </div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To make it work, you'll need to adjust your structure a bit. Here is the updated fiddle:

<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>

Additionally, add a little margin like this:

.col-lg-4 .div-category{
  margin: 0 20px;
}

This should resolve the issue.

@import url('http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #231123;
  background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}



.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
}
.col-lg-4 .div-category{
  margin: 0 20px;
}
<div class="container marketing">
<div class="row">
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text1</h2>
            <p>Paragraph1 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
            </div>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text2</h2>
            <p>Paragraph2.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text3</h2>
            <p>Paragraph3</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->
        </div>

Answer №2

Next, include an additional div element and add margins to it using the .inside-margin class

<div class="col-lg-4 col-md-4 col-sm-4 div-category">
<div class="inside-margin">

</div>
</div>

.inside-margin{ margin:0 5px; }

Answer №3

The reason for the issue is that you have already used up all 12 columns of the grid, so when you try to add margins, there is not enough space left on the screen causing it to wrap to a new row.

To fix this, you can change the col-lg-4 to col-lg-3 and then apply the margin.

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

Custom header options are not visible within the WordPress customizer interface

customizer.php code function custom_header_settings($wp_customize){ $wp_customize->add_section( 'header_settings' , array( 'title' => 'Header Settings', 'priority' => 30, ) ); $wp_customize ...

javascriptphphtmlwordpressheader

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

javascriptjqueryhtml

Guide on how to trigger a pop-up modal to open a new webpage by clicking on a hyperlink

I have a page called one.html that has a link on it <a href="#">Click to open second page<a/> When this link is clicked, I would like for second.html to open in a popup modal. The second page contains a basic table that I want to di ...

javascripthtml

Reasons Child Components in React Native & Redux Are Not Re-rendered with Every State Update

Within my React Native and Redux setup, I have a <NavigationCardStack/> component serving as the root. Whenever the state is updated, the redux-logger correctly displays the new state. However, after a state change, the child component fails to log ...

javascripthtmlreactjsreact-nativeredux

Stop working to $(this) in jquery when clicking outside

I'm facing an issue with my code and would like some help. I have a button that toggles the visibility of a filter element, which is working fine. However, I now want to implement a "click outside" effect to close the filter when clicking on any body ...

javascriptjqueryhtml

A complete div component with a minimum height that is sandwiched between a fixed size header and

I'm currently facing a challenge with setting up my webpage due to the height of my elements causing a bit of a frenzy. Specifically, I have a specific layout in mind: At the top, there should be a header that has a fixed height (let's say 150p ...

htmlcss

Extracting information from a website with C#

Hey everyone, I am looking to extract specific table data from a webpage instead of retrieving all the information. For instance, take a look at the URL provided below. There are multiple tables on the webpage. Can someone please provide me with a soluti ...

c#htmlasp.net.net

jQuery is not active on responsive designs

I have implemented a script in my JavaScript code that changes the color of the navigation bar when scrolling. The navigation bar transitions to a white color as you scroll down. However, I am facing an issue with responsiveness and would like to deactivat ...

javascriptjquerycssresponsive

The $_GET[id] function is malfunctioning within the designated div element

I'm trying to create a link with an id that points to a specific div on the same page. <a href="#?id=<?php echo $id; ?>" class="team-detail" data-reveal-id="single-news"></a> However, the id is not working in: <div id="single- ...

javascriptphpjqueryhtmlcss

I am in the process of troubleshooting why the header does not redirect correctly when clicked

As I work on developing a user authentication script for my database, I encounter an issue when trying to match the information in my MySQL database upon clicking a button. For some reason, nothing seems to happen regardless of whether the login informatio ...

phphtmljqueryajax

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Tips on activating the overlay solely on the image without affecting the entire column

Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...

htmlcssbootstrap-5

What causes the significant difference in website speed between Internet Explorer and Firefox?

While operating an asp.net website, I have noticed that one specific page is running significantly slower in Internet Explorer compared to other pages. Interestingly, this same page performs well in Firefox. Does anyone have insight into why this discrep ...

html

How can I transfer data to a Bootstrap modal in AngularJS?

Check out this plunker for reference - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview I have integrated a Modal feature from I am looking to pass the transaction ID to the delete function. How can I achieve this using AngularJS? Your assistance is ...

twitter-bootstrapangularjsangularjs-scopeangularjs-ng-repeatangular-strap

Tips for customizing a jQuery themeHere are some strategies for

I have been working with the Smoothness theme and Jquery tabs, and I am looking to customize the appearance of a few specific tabs. I have attempted the following approach: $('#tab-id').css('background', '-moz-linear-gradient(cent ...

jquerycssbackgroundtabs

jQuery is not defined when importing reactjs, bootstrap, and npm modules

Having trouble using Bootstrap in my React app, as I keep getting an error message saying Error: Bootstrap's JavaScript requires jQuery. I've already imported jQuery and tried various solutions found in other posts like: import $ from 'jque ...

javascripttwitter-bootstrapreactjsnpmcreate-react-app

The button's color doesn't seem to change to the correct one when clicked

Despite my efforts, I can't seem to get the button border to match the color of the hover state. I've tried using the focus selector and even the active state, but nothing seems to work. Below is the relevant code snippet from the project, and yo ...

cssbootstrap-4

How can I ensure my HTML font color matches the background using CSS?

How can I create a smooth transition between my HTML font and background using CSS? I want to gradually change the color of a bold font pixel by pixel to match the background color. For example, white font on a black background. How can I achieve this smo ...

htmlcss

Using Javascript/jQuery to show measurements in the format of feet and inches

I am currently developing a BMI calculator and facing an issue. I would like the height, which is in inches, to be displayed in feet and inches format. Additionally, I want the weight in pounds to be shown in stones and pounds. Here is the code snippet I ...

javascriptjqueryhtmlmath

The process of displaying a Login form on the Home page

Is it possible to display the React bootstrap login form on the same home page without redirecting to a new /login page? Basically, I want to disable all current page activities (like clicking and scrolling) when the user clicks on the Login link, and onl ...

reactjsbootstrap-4react-bootstrap