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

Sleek Navigation in CSS and HTML

Hello, as I work on my website with multiple pages, I am looking to implement smooth scrolling on a specific page without using the html tag for the entire site. Below is the code snippet I am working with: {% if section.settings.display_product_detail_des ...

htmlcssshopifyliquid

What is the best way to switch the site header in JavaScript or jQuery?

I have created a Bootstrap menu design and I am looking to add a sliding functionality to it. My goal is to hide the menu when scrolling down and display it when scrolling up (slide-down / slide-up). For implementing this feature, I plan to utilize jQuery ...

javascripthtmljquerybootstrap-4

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

javascriptphpjqueryhtmlcss

The show/hide jquery function is functioning perfectly on desktop devices, but issues arise on mobile devices where the divs overlap each other when using the show() method

I need a way to toggle input text boxes based on selection using a select box This is the HTML code snippet: <div class="row"> <div class="form-group"> <div class="col-sm-1 label2"> <label class="control-label ...

javascripthtmlcssmedia-queries

What is the best way to showcase an image using CSS on my personal computer?

It's a bit embarrassing to admit, but I'm learning some new concepts and struggling with this one. On my computer, there's a folder named Test that contains an index.html file, a CSS subfolder with an index.css file, and an images subfolder ...

htmlcsslocal

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Creating a personalized error page with the .htaccess file

I want to create personalized error pages for different errors This is the layout of my directory: .htaccess error_pages: error_400.html error_401.html error_404.html ...

phphtmlcss.htaccess

What is the formula for determining the grid width when an item exceeds the column size?

I am working with a grid that matches the size of an image, which can be adjusted to be both smaller and larger in size. Within this grid, I have 6 items. Each item is wider than the columns in the grid. In order to achieve the desired width for the gri ...

csstailwind-css

Next.js production mode prevents CSS from loading properly

Issue Upon building and launching a production build of our application, the CSS fails to load. Inspecting the devtools reveals a multitude of errors and warnings: Possible Causes The problems do not occur when running the app in development mode. Othe ...

csswebpacksassnext.jswebpack-style-loader

Challenges with iFrame Resizing on Internet Explorer

After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...

cssinternet-exploreriframeinternet-explorer-8scale

I am having trouble getting the Sass Bootstrap 4 styling to work on my HTML document

As a newcomer to sass, I am currently working on applying sass to my HTML file. Here is the code snippet from my HTML file: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link href="sass/app.scss" rel="stylesheet" > & ...

sassbootstrap-4scss-mixins

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

Currently, I am attempting to implement the code for ramjet from . However, I am facing an issue where element a does not disappear when transitioning into b. Additionally, I am encountering an error message "--Uncaught TypeError: Cannot read property &apo ...

javascriptjqueryhtmlcss

What is the best way to synchronize the image dimensions and source when dynamically loading images?

I am facing an issue with a function that updates images by altering the src and css (width/height) of an IMG tag within the document. Below is a simplified example to demonstrate the problem: updateImage = function(src, width, height) { $("#changeMe"). ...

javascriptjquerycssimage

Hide popup using HTML when clicking outside of it

Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at . $(".song-status-link").popover({ html: true, placement: 'bottom', ...

jquerycsstwitter-bootstrap-3popover

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

When it comes to using similarities in my code, I often find myself needing a more flexible solution. For example: .position{ position:absolute; right:10px; top:20px; } This is where the idea of using a mixin comes in handy: .position(@absolute:ab ...

cssless

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

javascripthtmlcssreactjs

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

javascriptjqueryhtmlcssmatch

Once the image is loaded, cropped, and displayed on the canvas, what is the best way to implement image rotation functionality for the user before converting it to base64?

My process involves cropping images to a square shape and drawing them onto a canvas. if(img.height >= img.width) { ctx.drawImage(img, 0, 0, 110, 110 * img.height / img.width); } else { ctx.drawImage(img, 0 , 0, 110 * img.width ...

javascriptjqueryhtmlcsscanvas

Tips for concealing a div using an article until it is activated by hovering over it

I am looking to incorporate a sleek sliding animation on an article that reveals more information in a div upon mouseover. A great example of this can be seen on where clicking at the top right corner triggers the "Show Modern Dev Ad" feature. Below is m ...

javascriptcsshtml