I am trying to add padding or margin between columns.
However, whenever I set it in css, the columns end up breaking down.
Here is the HTML and CSS code:
Currently, without any margin, the 3 columns are displayed correctly but with no space between them:
https://i.sstatic.net/fEM8h.png
When I try adding CSS margin, things don't look right:
https://i.sstatic.net/AHoF3.png
If you uncomment the CSS in my code (link provided), you can see the issue that arises.
To ensure that the cards are properly spaced within the bootstrap layout, you should insert the cards inside the col-md-4 and add padding to the div. This will create space between the cards while maintaining the overall structure.
//css
.cards-postagens-wrapper {
padding: 15px;
}
.cards-postagens {
background-color: #d4ecd6;
height: 9em;
text-align: left;
border-radius: 8px;
}
//html
<div class="col-sm-12 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">categoria blog</div>
<div>12 a column here</div>
</div>
</div>
This concept is demonstrated in the following snippet.
.cards-postagens-wrapper {
padding: 15px;
}
.cards-postagens {
background-color: #d4ecd6;
height: 9em;
text-align: left;
border-radius: 8px;
}
.badge-postagens {
margin-top: 2%;
margin-left: 2%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container" id="corpo-pagina">
<div class="container-fluid" id="corpo-pagina-conteudo">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">
categoria blog
</div>
<div>11 a column here</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">
categoria blog
</div>
<div>11 a column here</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">
categoria blog
</div>
<div>11 a column here</div>
</div>
</div>
</div>I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn&apos ...
I'm encountering an issue with hiding a div using select and onchange function. Even though the jQuery function I've written is correctly showing and hiding the div based on select option values, when I revisit the page, the div is still displaye ...
I am struggling with a basic CSS layout issue. I have a div container with content that I am trying to divide into two sections using the float property. Despite applying the float to the elements within the div, they do not stay inside as expected. https ...
I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...
I am working on a Laravel project where I have implemented recursion to create different HTML elements for each item. My goal is to open a modal when clicking on these links and pass the appropriate variable based on the clicked element. EDIT: Changes mad ...
I need help with the following markup: <p>Sample text. Click <a href="google.com">Here</a></p> Can someone assist me in replacing the <p> tag with <span> while keeping the children and text of the tag unchanged? ...
I am in need of a solution for uploading multiple images along with descriptions. Users will be uploading 1-10 large-sized images from cameras, so it would be ideal if the images could be resized before the upload. My requirements are: Compatibility wit ...
I am looking to move the closer to the content in the header. I attempted using position-absolute but the disappeared. This marks my inaugural project with bootstrap. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/ ...
I am facing a challenge with the following code snippet. The Variable contains a string that includes HTML tags such as <img>, <a>, or <br>. My goal is to eliminate the <img> tag, <a> tag, or <br> tag if they appear befo ...
Recently, I encountered an issue with changing a 3x3 image gallery layout to an image slider when the screen size was less than 768px (mobile). Thanks to the help of everyone and particularly Danilo, who provided solutions in the comments, I was able to id ...
Just a quick inquiry: Our Content Management System (CMS) utilizes CKEditor for clients to modify their websites. The front-end styles include the use of a pre tag, which we have customized to our desired appearance. However, when their team members copy a ...
Can anyone guide me on how to properly check the file $_FILES? I have come across methods that involve checking the MIME-TYPE, but I've learned that this may not be the safest approach. I am familiar with how it works for images, where you can use att ...
I'm attempting to display the "left" and "right" divs side-by-side in the following example. However, they are not appearing next to each other as expected. Can someone point out my mistake? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
In the past, EMs were favored over pixels for font size because they could scale with IE6 while pixels could not. Nowadays, modern browsers can handle pixel-sized font scaling correctly. Another advantage of EMs is that they cascade, unlike pixels. But if ...
I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...
I'm currently using the following <p> tag but it's creating a gap between the tick mark and the text that follows after the closing </p> <p class="tick">✓</p> Post messages to friends all over the world. CSS: .tick { ...
Is there a way to keep Collapse 2 directly under Collapse 1 when Content 1 is displayed? I attempted to reorganize the code, but it resulted in chaos. :D .collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ displa ...
Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...
Looking for advice on creating a scroll down button with a hovering effect similar to the one found on this website - . Any tips or suggestions would be greatly appreciated. ...
I have a cool animated image element that I want to play at a specific point in time during a video using JavaScript. I'm not sure how to make it happen, but I know the .currentTime property could be the key. My goal is for the animation to only play ...