How to Create a Custom Bootstrap Skewed Cards?

In our Bootstrap tutorials, we have explained the cards component in detail. Since the card component is one of the most attractive component, you can see lot of variations all over the internet. We also have explained flip card widget and user profile widget as a customization. In this article, let us create custom Bootstrap skewed cards in different styles.

What is Skewed Card?

Skewness is nothing but twisting elements in one of the X or Y directions. This is very easy to achieve using the CSS transform property. In our example, let us create the following variations:

• Skewed card with negative degree in X axis
• Skewed card positive degree in X axis
• Skewed card perspective negative degree in Y axis
• Skewed card perspective positive degree in Y axis
• Skewed card with plain text and title

We will use inline CSS to indicate the styles used, you can define all the styles in an external CSS if you have one on your Bootstrap theme. In all types, you simply need to add “transform:skewX()” or “transform:skewY()” to the existing “.card” class. In addition, we have also used 1rem (20px) for margin and 20rem for the width for proper alignment.

Skewed Card with Negative X Direction

Let us create a skewed card with -8 degree in X axis direction, below is the code for the same:

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewX(-8deg);">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

The result will look like below on the browser:

Skewed Card with Positive X Direction

Now change the negative degree to positive in skewX() to change the direction of the skewness.

<div class="row" style="margin:20px;">
<div class="card" style="width:20rem;transform: skewX(8deg);">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

It should produce the below output:

Perspective Card in Negative Y Axis

Now change the skewX() to skewY() to create a perspective card with -8 degree.

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewY(-8deg);">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

The perspective card with negative angle should look like below:

Perspective Card in Positive Y Axis

Similarly, create positive perspective card by changing the skewY() to +8 degree.

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewY(8deg);">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

It will produce the below result:

Skewed Card with Plain Text and Title

In all the above examples, the title, text and button text are also skewed as the skewness is applied at card level. This makes sense on the perspective (Y axis) cases, but when the skew is applied on the X axis the text content need not to be skewed. In order to make the text back to normal, just apply the same degrees in opposite direction.

Below is an example code, applying +8 degree on card level and again applying -8 degree on card body level to bring the text inside the card body to normal.

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewX(8deg);">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body" style="transform: skewX(-8deg);">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div>
</div>

The skewed card with plain text should look like below making the text in more readable format.

Adjustment on Mobile Devices

The above skewed cards may look ver well on desktop devices. But they will be going beyond the screen of mobile devices thus creating a horizontal scroll bar. Use the below CSS media query to make the card looking normal on mobile devices less than 480px. This essentially means, we make the card without skewness on mobile devices while the skewness is shown on larger devices.

<style>
@media screen and (max-width: 480px) {
.card {
width:20rem !important;
margin: 0 !important;
flex-direction: column !important;
-ms-flex-direction: column !important;
transform: skewX(0deg) !important;
transform: skewY(0deg) !important;
border-radius: 0 !important;
}
.card-body {
transform: skewX(0deg) !important; 
}
}
</style>

Additional Customizations

If you have noticed, all the above codes have an additional “btn-md” class attached to the button element. This is not a default Bootstrap class, we have added to for showing box shadow effect. Also some additional effects can be added for hovering and removing border radius.

<style>
.card:hover {
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.19),0 0.3rem 0.3rem rgba(0,0,0,.23);
}
.btn-md {
border-width: 0;
outline: none;
border-radius: 0 !important;
box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, .6);
cursor: pointer;
}
.btn-md:hover {
background-color: black;
}
.card, .card-img-top {
border-radius: 0 !important;
}
</style>

You can use the media query and additional customization styles in external stylesheet. If you are adding the styles inside the head section of your page then don’t forget to use combine and put all codes inside <style>…</style> tags. Remember to create separate CSS classes for each required style similar to “.btn-md” class and apply to required cards on your page. Otherwise all the card elements on the page ill get affected if you use styles in head section or in external stylesheet.