Having trouble with the nth-child CSS property in Bootstrap?

My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap that can help achieve this? I understand I could manually add a .mt class, but since my PHP code dynamically generates these elements, that approach fails. Could you please take a look at this CodePen and assist me with this?

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
      </div>
    </div>
  </div>
</div>
csstwitter-bootstrapbootstrap-4

Answer №1

.panel is a direct descendent of col-md-6, so in order to style it, you need to include the following CSS:

.col-md-6:nth-child(even) .panel{
  margin: 20px 0 0 0;
  background-color: blue;
}

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

The art of applying styles through styled components

I am attempting to customize the styling of my component with the following code: export const StyledCascader = styled(Cascader)` background-color: gray; ul.ant-cascader-menu { background: red !important; } `; Despite using styled components ...

cssreactjs

Rzslider not functioning properly due to CSS issues

I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet: var app = angular.module('rzSliderDemo', ['rzModule', 'ui.boo ...

javascriptangularjshtmlcssangular-material

Alter the color of H3 when clicked and then gently fade it back

Is it possible to create a button on the top of my webpage that scrolls to a specific DIV when clicked, and also have it change the color of an h3 element once it has scrolled to it? This effect is similar to how Facebook highlights notifications. This is ...

jquerycssjquery-animate

Ensuring that the contents hidden by overflow:hidden remain truly concealed

When applying overflow: hidden; to a div, I have encountered situations where keyboard actions can still cause the div to scroll, even without visible scrollbars. This makes it difficult to return the div to its original state. Are there any additional ste ...

htmlcss

Achieving perfect alignment of an image within a Twitter Bootstrap cell when the height of the cell is uncertain

I have a bootstrap grid and I am attempting to center an image (200x100 as shown in the provided example) within a cell. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html& ...

csstwitter-bootstrap

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Looking to align a radio button in the middle of an inline-block?

Is it possible to center a radio button within an inline-block? I have provided a demo on JSFiddle that displays the current layout and how I envision it should appear. Check out the demo here Here is the code snippet in question: <span style="widt ...

htmlcss

Automatically adjust multiple images on an HTML webpage

Just starting out with html programming here. Looking to add top margin using a span class, any tips on how to tackle this issue? ...

javascriptjqueryhtmlcss

What could be causing the issue with the padding-top not being applied to my section?

I'm having trouble getting the desired 150px padding to appear on the top and bottom of a section in my project. Here's an example: Below is the code for the section: .wp-block-mkl-section-block .section-bg { position: absolute; top: ...

htmlcsspadding

locate the following div using an accordion view

Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/ There are various methods to achieve this, but one approach is by using a CSS class called sub to hide a 'nested' div and then using jQuery to toggle the Glyphicon while displaying the 'nest ...

javascriptjqueryhtmlcss

What is the best way to use border radius on a canvas element similar to a div in order to create a

I'm having trouble making a canvas element appear as a circle like any other div. Here is my code, please take a look and let me know what I'm doing wrong with the border-radius property: <canvas id="myCanvas" width="200" height="200" style ...

htmlcsshtml5-canvas

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

pythonhtmlcssseleniumselenium-webdriver

How to Keep Images Within Table Borders From Overlapping?

I am in the process of experimenting with creating a newsletter and have developed a template. I am very new to design and have created a table of album releases that is not fitting within the border I established. How can I resolve this issue? The code s ...

htmlcssresponsive-design

What are the steps for incorporating a linear-gradient hue into a Slider?

Is it possible to apply a linear-gradient as color to Material-UI Slider? I have tried everything but can't seem to make it work. color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)' ...

cssreactjsmaterial-ui

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...

c#cssasp.netasp.net-corerazor

Bootstrap link causing alterations to my CSS code

After incorporating Bootstrap into my HTML, I noticed that it caused some unexpected changes to my CSS code. Original CSS: https://i.stack.imgur.com/EsE6J.jpg Modified CSS after applying Bootstrap: https://i.stack.imgur.com/yH1r9.jpg Link to Bootstrap ...

csstwitter-bootstrap

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn't find any hook or function to disab ...

phpcsswordpresswordpress-themingwp-admin

Adjust the color of the paper in Material-UI

I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawe ...

javascriptcssreactjsmaterial-uiclass-names

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

javascriptcsshtmlpaperjs

Unforeseen box model quirks found in modern browsers when styling <table> elements

Here is a sample HTML document that demonstrates the issue: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; ...

htmlcss