Tips for creating square corner images within a bootstrap card group

How can I create a square image gallery using Bootstrap 4 cards?

<div class="card-group flex-wrap">
                    <div class="card border-dark">
                       <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg"  alt="Card image cap">
                    </div>
                    <div class="card border-dark">
                        <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
                    </div>
                    <div class="card border-dark">
                        <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
                    </div>
</div>

I want the images in the gallery to have square corners instead of rounded. I've tried adding the following code but it didn't work:

 <img src="" class="img img-responsive full-width" />

Any suggestions on how to achieve this?

htmlcssbootstrap-4

Answer №1

Implement the rounded-0 utility class to create rounded borders...

  <div class="card-group flex-wrap">
        <div class="card border-dark rounded-0">
            <img class="card-img-top rounded-0" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
        </div>
        <div class="card border-dark rounded-0">
            <img class="card-img-top rounded-0" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
        </div>
        <div class="card border-dark rounded-0">
            <img class="card-img-top rounded-0" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
        </div>
  </div>

Check out the demo here

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

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

javascripthtmlcsswebweb-testing

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

javascripthtmljqueryevent-handling

Tips for avoiding cropped images on mobile websites:

I recently created a website that looks perfect on desktop but appears cropped on mobile devices. The site in question is doc.awsri.com Here are the images causing the issue: https://i.stack.imgur.com/eRJXU.png The problem arises when viewing it on a ph ...

javascriptjqueryhtmlcssimage

Extract the content within an HTML element that is not within a header tag

Is there a way to extract the inner text from HTML using HTMLAgilityPack in C#, excluding text within any <h1-6> tags? I prefer not to use Regular Expressions and stick to HTMLAgilityPack. This is my current approach: var document = new HtmlDocumen ...

c#htmlhtml-agility-pack

"What is the best way to prevent a button from being enabled in Angular if a list or array is not

I am incorporating data from my service in the component: ngOnInit() { this._sharedService. getReceiptItem().takeUntil(this.ngUnsubscribe). subscribe(products => this.receiptItems = products); } Is there a way to deactivate a button if there ...

javascripthtmlangularcss-selectorsangular-services

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

cssyoutube

Footer displays within the content section

Currently, I am utilizing Next.js and antd's layout components to create a dashboard-style page using their Layout component. However, I have encountered two issues related to styling (CSS) in this setup: Footer appearing within the Content: I am wo ...

htmlcssreactjslessantd

Stop my ::after element from interfering with my select dropdown menu

Check out this JSFiddle I created to showcase my issue: JSFiddle I am currently working on a customized dropdown menu using an icomoon icon instead of a V. While the design looks great, the ::after pseudo-element for the parent container is causing issues ...

htmlcssdrop-down-menu

Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as t ...

htmlcss

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

javascriptjqueryhtml

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

javascriptjquerywidthcss

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

javascriptjavahtmljsp

Animating text-shadow color in CSS from left to right

I need help with transitioning the text-shadow color horizontally on hover. I found a solution that demonstrates how to do this here: Although it shouldn't matter, I am working in react with styled-components. Here is an example of what I am trying ...

htmlcssreactjsstyled-components

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js : https://i.sstatic.net/pQP79.png My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintai ...

javascripthtmlcss

Increasing the identifier of duplicated input fields using jQuery

There is a specific section in my form that consists of a select box and three checkboxes, which needs to be duplicated on request. While I have successfully cloned the div and incremented its specific div, I am facing challenges in incrementing the checkb ...

javascriptphpjqueryhtmlwordpress

converting an entire HTML layout into a PDF using JavaScript

I am attempting to convert an HTML design to PDF using the following script: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>. I have designed a table to my liking, here is how it looks in HTML: https://i. ...

htmlangularjsjspdf

Issues with div placement arise when incorporating relative positioning and floats

I have been attempting to position two divs with images next to the other divs but they appear underneath them instead. Can someone help me figure out what I am missing? FIDDLE CSS #main { margin: 0 auto; } #header { clear:both; float:left; ...

htmlcss

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

javascriptjqueryhtmlcss

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

htmlcsstwitter-bootstrapresponsive-designnavbar

Unable to Display CSS Background

Hey there, I've been experimenting with CSS backgrounds to create a header line consisting of 5 equally sized portions, each in a different color. I'm having trouble getting the background to display properly. Below is the code I have written. An ...

htmlcssbackgroundbackground-image