Bootstrap card boundaries

Hey there, I'm looking to work with Bootstrap v4.0.0-beta Cards.

I've noticed that the "card-block" class isn't working for me. Only when I use the "card-body" class does it resemble the examples.

Is there a way to get rid of the double border between my cards? Each card has a 1px border, but between them there is a 2px border. I'd like it to be just 1px. Is there an easy solution for this?

Here's the code snippet:

<div class="row no-gutters">
    <div class="card col-sm-6 col-lg-3">
        <div class="card-img-top"><img src="pic.jpg" /></div>
        <div class="card-body">
            <p class="card-text">my text</div>
        <div class="card-footer">my footer</div>
    </div>
    <div class="card col-sm-6 col-lg-3">
        <div class="card-img-top"><img src="pic.jpg" /></div>
        <div class="card-body">
            <p class="card-text">my text</div>
        <div class="card-footer">my footer</div>
    </div>
    <div class="card col-sm-6 col-lg-3">
        <div class="card-img-top"><img src="pic.jpg" /></div>
        <div class="card-body">
            <p class="card-text">my text</div>
        <div class="card-footer">my footer</div>
    </div>
    <div class="card col-sm-6 col-lg-3">
        <div class="card-img-top"><img src="pic.jpg" /></div>
        <div class="card-body">
            <p class="card-text">my text</div>
        <div class="card-footer">my footer</div>
    </div>
</div>

Thanks for any help you can provide!

csstwitter-bootstrapbootstrap-4

Answer №1

Utilize the border utilities for styling...

   <div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

Note that card-block has been changed to card-body from alpha 6 to beta

For better structure, consider placing the cards within the columns.

Answer №2

Utilize Bootstrap 4's border classes to enhance the appearance of your cards. Below is a sample code snippet where the border-right-0 class is applied to all cards except the last one.

<div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

Visit this link to view the demo.

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

Tips for simultaneously hovering over SVG and text elementsFeel free to hover over both SVG

After importing an SVG image and creating a box containing both an icon and text, I noticed that when hovering over the box, only the color changes to yellow while the SVG remains unaffected. How can I resolve this issue so that both the text and icon chan ...

javascripthtmlcssreactjssvg

Is CSS causing a overflow when trying to print 210mm by 297mm on A4?

Take a look at this basic HTML code : <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .page { width: 200px; height: 500px; background ...

htmlcssprinting

Looking to adjust the width of a Bootstrap dropdown menu?

I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

"Encountering a glitch with masterpage.cs in Aspx.net and C#

Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...

c#cssasp.net

utilizing jquery for dynamic color changes

Check out the code snippet below, which involves the bootstrap accordion and showcases certain elements within the title section. <dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Manage</span>& ...

jquerycsscolorsaccordion

What methods can be used to strategically incorporate gray into both the left and right sides of a page design?

I'm currently working on an asp.net MVC layout page and I'm trying to create a layout where the left side and right side are gray. However, I'm not sure how to achieve this using HTML, CSS, or Bootstrap. I specifically need to know how to ...

javascripthtmljquerycssbootstrap-4

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

First and foremost, I apologize for the awkwardly phrased question. The issue at hand is that when the tags exceed the container size, the search option becomes hidden. My goal is to have the search bar adjust dynamically, moving everything back inside the ...

jqueryhtmlcss

Creating a split screen layout using Bootstrap

I've been working hard to create a split-screen layout using Bootstrap. After using CSS to achieve it, I realized that it's not responsive for mobile users. Therefore, I'm reworking it with Bootstrap but facing issues with resizing the image ...

htmlcssbootstrap-5

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey. I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background ...

javascriptcssbootstrap-4nav

Exploring and deciphering the intricacies of the underlying technology

Apologies if this question seems misplaced, but as a complete beginner, I'm a bit lost. Let's consider this website as an example: I'm trying to uncover the libraries and technologies employed in the background to learn more and replicate ...

javascriptcssthree.jsoverlay

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax

Lengthen the space between each item on the list to enhance readability

Is there a way to adjust the line height between li tags? I attempted using height:100%, but it seems ineffective. Are my methods correct? Can anyone provide guidance? The following is the code snippet in question: <html xmlns="http://www.w3.org/1999 ...

htmlcss

The makeStyles feature is currently not functioning properly in the latest version of Next.js with Material UI v5

Currently, I am utilizing nextjs along with material ui in my project "@mui/material": "^5.0.1", "@mui/styles": "^5.0.1", Below is the code snippet of my component structure import { AppBar, Toolbar, Typography, Box ...

cssmaterial-uinext.js

Tips for updating the color of table data when the value exceeds 0

I'm currently working on developing a transaction table that is intended to display debit values in red and credit values in green. However, I would like these colors to only be applied if the value in the table data is greater than 0 via JavaScript. ...

javascripthtmlcss

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

htmlcss

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

htmlcssangularjs

Creating background images in select tag using only CSS

I am interested in achieving the following task This is a selection drop down form that I need to work on Here is the code snippet: HMTL <select> <option>Country</option> <option>I ...

formscss

The Bootstrap image slider is limited to showing a single item at a time

I've been attempting to implement a carousel in Bootstrap 4 that displays multiple items at once and allows scrolling one item at a time, but I can't seem to get it right. Despite going through various tutorials and forum posts, the carousel alwa ...

javascriptjquerymodel-view-controllerbootstrap-4carousel

How can I customize the styling of an SVG pseudo element using Font Awesome 5?

I've implemented font awesome 5 pseudo elements to attach an :after tag to my element as shown below: &:after { content: "\f068"; font-weight:400; color:$brandRed; float:right; font-family: "Font Awesome 5 Pro"; } The c ...

javascriptcssfont-awesomepseudo-elementfont-awesome-5

Determining WebElement Clickability in Java and Selenium: Beyond the Basics of isDisplayed, isEnabled, and findElement

There is a common method to test if a WebElement is clickable: It typically involves something like this: public static boolean isElementClickable(WebDriver driver, String accessor){ return driver.findElements(By.xpath(accessor)).size() > 0 & ...

javahtmlcssseleniumexception