Styling your content with Bootstrap 4: a sleek col-md-4 design featuring

I have been using this carousel component:

https://i.sstatic.net/2haSi.png

One issue I have noticed is that there is a border around each block in the carousel.

Specifically, on the first slide, the left shadow is not visible, and on the third slide, the right shadow is not visible.

I have attempted to fix this by adding a margin-left:-5px to the right 

<div class="col-md-4 clearfix d-none d-md-block">
, which does make the shadow appear, but I believe there must be a cleaner solution.

Does anyone have suggestions on how to modify the col-md-4 to ensure the shadow is visible on both the left and right blocks?

csstwitter-bootstrapbootstrap-4mdbootstrap

Answer №1

The problem lies in the carousel-inner extending the width of exactly 3 cards (and the space in between), causing the shadow to be partially cut off. The adjustment of margin-left: -5px resolves this issue.

However, this solution is not ideal. A more straightforward approach would be to add a small amount of x-axis padding to the carousel-inner by applying the class px-1 to it. This will slightly decrease the spacing between your cards but will ensure that the shadows are displayed properly.

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

What is the best way to position an image in the center over a video using HTML and CSS?

I am currently developing a website with a background video and I want to overlay a company logo on top of it while keeping it centered. My coding language of choice for this project is using HTML and CSS. Here's the HTML code snippet I have for this ...

htmlcss

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Avoid using hacks Do not hard code the solution. The goal is to create a solution that works for dynamic content and responsive screen sizes, rather than just one specific case. The issue lies in the fact that the headers are not direct children of the e ...

jquerytwitter-bootstrapcssflexbox

Django (HTML) - Interactive tag in template not functioning

Currently, I am immersed in a Django project that involves incorporating custom checkbox forms. However, I ran into an issue where two identical code chunks are used with different forms. The problem arises when the label in the first sample is clickable ( ...

pythonhtmlcssdjango

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

I'm a beginner and encountered an error saying Uncaught TypeError: players.setAttribute is not a function when submitting an action. How can I solve this issue? Please share your insights. ''' //selecting all necessary elements const s ...

javascripthtmlcss

I am experiencing difficulty in retrieving the result for the following code snippet

I'm currently attempting to retrieve data for my chart from a data.csv file. <!DOCTYPE html> <html> <head> <title>D3 test</title> <style> .grid .tick { ...

javascripthtmlcsssvgd3.js

Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not ...

cssreactjsmaterial-ui

Why is it that @font-face fails to function properly even after being defined correctly?

Here's the @font-face code I've been using: @font-face { font-family: "NotesEsa-Bold"; src: url("C:\Users\test\Desktop\Webpage\Fonts\NotesEsaBol.ttf") format("truetype"); /* Safari, Android, iOS */ font-we ...

htmlcssfonts

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

javascripthtmlcssvue.jsvuejs2

Center an element on the screen by dynamically adjusting its position according to the media query

As I work on creating a responsive website that can adapt to screens of various devices, I am facing a challenge. Each device has a different number of pixels, making it difficult to centrally position a div dynamically. Currently, I am using margin-left: ...

htmlcsstwitter-bootstrap

Tips for creating a responsive <tr> table with <td> cells

Struggling to create a scrolling table with CSS? When using overflow-y : auto, the <td> tag becomes overloaded in the <tr> element. Take a look at the example code below to see the HTML and CSS in action: HTML CODE : <table id="check" cla ...

htmlcssscroll

Is there a way to use jQuery to centrally align the accordion item that I have chosen?

My attempts to use `this.scrollIntoView({behavior: "smooth"}) were yielding inconsistent results in terms of where the selected item would land on the page. I believe I might need to utilize scrollTop(), but as someone who is new to jQuery, I am ...

javascripthtmljquerycssscroll

The right-floating div element is not displaying horizontally; instead, it is breaking into a new line

My issue is the dynamically added div elements are not displaying horizontally within a container div element with a specific width. They always break into a new line. Below is the code snippet I am using: var i=1; $(document).ready(function () { ...

jqueryhtmlcss

Styling Process Steps in CSS

Just starting out with CSS! I'm looking to replicate the Process Step design shown in the image. https://i.stack.imgur.com/Cq0jY.png Here's the code I've experimented with so far: .inline-div{ padding: 1rem; border: 0.04rem gray ...

javascripthtmlcss

Jquery for controlling the navigation menu

I'm new to JavaScript and facing 3 challenges: 1. When I click on the parent <li>, the correct content of the child <sub> does not show up. Each category like "colors, shapes, sizes" should have corresponding child categories like "green, ...

javascriptjqueryhtmlcss

Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

I am currently working on the following code: <h1><span>Test Heading This is the text that I want to display on the right side. This is the text that I want to display on the right side. This is the text that I want</span></h1> < ...

javascriptjqueryhtmlcss

The evaluation of jQuery did not function properly on the less.css file

I have a jQuery function that I am using as shown below @winheight:`$(window).height()` within my less file. However, when I compile it to CSS, I encounter a compiler error I am currently using a software called Crunch Compiler Errors You are usin ...

javascriptjquerycssless

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...

javascriptjqueryhtmlcss

Exploring cross-browser compatibility with the use of CSS3 and JavaScript

Starting a new project to create a fresh website. It seems like many people are leaning towards CSS3 and AJAX, neglecting browsers without JavaScript support. They resort to workarounds like enabling CSS3 through JavaScript in older browsers. Is this the ...

javascriptcssbrowsercompatibility

Applying the active state to the link will cause it to inherit the default styles of the

I am facing a challenge with overriding the active style of links in a universal manner, to restore them to their original state when they cannot be interacted with (such as during scrolling). In my current code, I implemented this: .scrolling a:active { ...

css

Tips for tailoring content based on screen size

I am looking for a way to display different content depending on whether the user is viewing my website on a large screen (PC/tablet) or a small screen (mobile). While my site is responsive and uses bootstrap, I have a lot of content that is only suitable ...

javascriptjquerycss