My goal is to design 3 columns of content with a touch of space between each, giving them a distinctive appearance when using a shadow effect.
However, the issue arises when I apply some margin with 'mr-3' to the left and middle columns, causing them to exceed the available width and wrap around the page.
Is there a way to add spacing between the cards/columns without extending beyond the designated space?
Applying margins to the columns in Bootstrap may disrupt the grid layout. The spacing between columns is achieved using padding, so it's recommended to place an additional container or box inside each column for any shadow effects. Adjust the padding of the columns as needed:
<div class="row">
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Unique title.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Another unique title.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">One more unique title.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
</div>
Visit this link for demonstration.
Consider wrapping your content inside the columns with a div tag to maintain proper spacing between them. By default, Bootstrap columns have a gutter space, and adding a div in between will display this space. You can also adjust margin or padding as needed. Here's an updated version of your code snippet.
<section class="key-features">
<div class="container">
<div class="row flex-column align-items-center">
</div>
</div>
<div class="container pt-4 pb-4 mb-5 ">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class=" text-center feature-item rounded py-3 shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Some title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div><!--//content-->
</div>
</div><!--//item-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class=" text-center feature-item rounded py-3 shadow">
<div class="feature-icon pb-3">
<i class="fa fa-hourglass-end"></i>
</div>
<div class="">
<h4 class="title">Anotehr title</h4>
<p> some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.
</p>
</div><!--//content-->
</div>
</div><!--//item-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class=" text-center feature-item rounded py-3 shadow">
<div class="feature-icon pb-3">
<i class="fa fa-check"></i>
</div>
<div class="">
<h4 class="">One more title</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div><!--//content-->
</div>
</div><!--//item-->
</div>
<div class="row justify-content-center my-5">
<a class="btn btn-success shadow" href="{% url "users:postcode" %}">Get Started -></a>
</div>
</div>
</section>
Here is the progress I've made so far: http://jsfiddle.net/F8An4/ I am attempting to achieve a design where there are borders on each side of the div, perfectly centered vertically and pointing towards the left and right sides of the screen. This sty ...
I am currently working on a One Page HTML webpage that needs to be responsive, and the requirement is to use Bootstrap. I have gone through all the tags but can't seem to identify the issue. One problem I encountered is that when I scroll down the pa ...
Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...
Currently working on developing a Dynamic Sub-menu for Wordpress, similar to the one shown here: . However, I am facing an issue with the width as it is set to 'auto' but not aligning the sub-menu properly. I would like the sub-menus to float lef ...
Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right s ...
Creating HTML Class In the following HTML code, a class is created with an anchor tag inside. Although CSS is applied to create a button, the border-radius property seems to not be functioning as expected. .instagram_button a { font-weight: 500; f ...
How can I save the inputs from a simple form as a text file using HTML code? Here is an example of the HTML code: <div id="wrapper"> <div class="main-content"> <div class="header"> </div> ...
Currently developing an HTML5 template known as Londinium - responsive bootstrap 3 admin template In my dropdown menu, I have three items. When the user clicks on Owned, I am trying to display the hidden div cown, but it is not showing up. The drop-down ...
Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...
People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...
Is there a specific reason to pass a new grid as the second argument of susy-breakpoint? Why not simply use susy-breakpoint without the second argument? When would you choose to use susy-media instead of susy-breakpoint? For more information, refer to: ...
My code works perfectly in Codepen but when I try to implement it on my website, it shows as a static image. You can view the code here: https://codepen.io/anon/pen/zPMKpv I'm using the exact same code on my website located at: Does anyone have any ...
I have integrated a Jquery DataTable inside a Bootstrap division. The Bootstrap row is split between the DataTable and a Chartjs chart. Initially, everything displays correctly without any overlapping. However, when I implemented code to enable column fil ...
There seems to be an issue with my images not showing up in the production environment (link here). Here is a snippet of my code: _header.html.erb <%if action_name == 'index' %> <div class="main_header_bg" id="main_head ...
I have a unique snippet of code that generates an element at the bottom of a div to serve as an inventive 'arrow/pointer' pointing down. Now, I am seeking assistance in tweaking the script so that the 'arrow/pointer' directs towards th ...
After seeing a question on How to make svg RTL I attempted to make my svg RTL using: transform: translate(100%, 0) scale(-1, 1); However, I noticed that when resizing my browser window, the transform is not properly applied and the line origin shifts ...
I am trying to import one HTML page into another, but when I load or refresh the page, the HTML markup appears before the page fully loads. How can I fix this issue? <head> <script type="text/javascript" src="js/jquery-1.10.2.js" ></scr ...
When using my android smartphone, a button on my website gets a blue selection color when clicked, but this does not happen when using a desktop browser. I have tried using outline:none but it doesn't work. button:active { outline: none ! ...
After extensive searching on Google and Stack Overflow, I finally found what seemed like the perfect solution. The logic behind it made sense and I understood it perfectly. But when I implemented it, my absolute positioned divs kept moving whenever I resiz ...
I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...