Tips for creating spacing between cards using Bootstrap

I'm having trouble organizing a row of 8 cards into a single line. I set a margin of 2 columns on the left side and each card size to 1, totaling 10. However, my row is all messed up. https://i.sstatic.net/TQOMR.png

Here is my current code for the border:

<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
  <div class="col-lg-1 text-center">
    <div class="card border-secondary mb-3" style="width: 10rem;">
      <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
</img>
   <div class="card-block">
    <div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
   </div>
    </div>
</div> 
</div>

I would like the card to maintain this width and potentially overflow on the right side of the screen. How can I achieve this?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The issue lies in the inline style you applied with width:10rem. This will take precedence over the width of col-lg-1 if it exceeds that column width. Removing the inline style will resolve the unexpected behavior.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <div class="card-header"> Discover new genres {{genre}}</div>
    </div>

    <div class="col-4 text-center">
      <div class="card border-secondary mb-3" style="">
        <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
        <div class="card-block">
          <div class="card-body">
            <p class="card-title text-center">
              <small>{{rec["name"]}}</small>
            </p>
          </div>
        </div>
      </div>
    </div> 

    <div class="col-4 text-center">
      <div class="card border-secondary mb-3" style="">
        <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
        <div class="card-block">
          <div class="card-body">
            <p class="card-title text-center">
              <small>{{rec["name"]}}</small>
            </p>
          </div>
        </div>
      </div>
    </div> 
  </div>
</div>

In this example, I have adjusted the column breakpoints for better functionality with 'Run Code Snippet'. If you were using inline styles due to col-lg-1 being too small, I suggest exploring a larger column breakpoint instead of using inline styles that may override grid behavior.

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

Achieving an IE7 opacity background while keeping the text unaffected

This is the given HTML code structure (view in JS Fiddle) How can I adjust the background color to be 20% opaque white while keeping the text black? It needs to be compatible with IE7. <ul class="menu"> <li class="first expanded active-trail ...

cssopacityinternet-explorer-7

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly

Apologies if the title is unclear. In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rend ...

javascriptcssajaxasp.net-mvc

Slanted lines HTML CSS

I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...

htmlcssborderzigzag

Issues with tabs functionality in Bootstrap version 4.3.1, unlike the smooth operation in v4.1.0

I encountered an interesting situation recently. After spending almost 3 hours troubleshooting my code, I discovered that it functions perfectly on Bootstrap v4.1.0 but fails on the latest version, v4.3.1. Working JSFiddle with Bootstrap v4.1.0: https://j ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Modify the :after property of an element using jQuery

Is there a different approach I can take to achieve this desired outcome? Currently, the code snippet below is not yielding the expected results. $('.child_flyout:after').css({'top':'20px'}); Are there any alternative method ...

jquerycss

Can you explain the significance of xpath=1 in an HTML document?

I am confused about a line in my design code that reads xpath="1". Can someone explain what this means in the context of the following code snippet? <select class="search-category" id="ddlTemp" name="Template" x ...

htmlxmlselenium-webdriverxpathchropath

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

htmlcsstwitter-bootstrap-3

substitute bullet point list item with new element

Assuming I have a list: <ul class="ul-1"> <li class="li-1">xx -1</li> <li class="li-2">xx -2</li> <li class="li-3">xx -3</li> </ul> Then I store it as: var list = $('.ul-1').html(); In ...

javascripthtmljquery

Font and div placement varies on a mac within a WordPress environment

www.oihanevalbuenaredondo.be After styling my post titles in CSS using font-family: adobe arabic, I noticed that while they display correctly on my Windows machine, they appear in a basic font on Mac OS, Safari specifically. Why is it that Safari cannot r ...

htmlcsswordpressfontswidget

Can CSS blend with elements beyond the stacking context?

I am currently in the process of constructing a "hero area" for my webpage through a CMS. This hero area will feature a background image, text content, and a couple of button links. My goal is to have the buttons utilize the mix-blend-mode:multiply propert ...

cssblendingmix-blend-mode

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...

javascriptcssmedia-queries

Setting predefined data in an HTML field from XML within the Odoo platform

In the model.py file of my project, I have defined an HTML field as follows: from odoo import models, fields class TestModel(models.model): _name = 'test.model' content = fields.HTML() To display the data from this model, I have used &l ...

htmlxmlodooodoo-14

Footer void of color

It's puzzling to me where the extra space in my footer is coming from. It seems to be around 20-30px as you can see on the following url: Despite the code in my footer being minimal, with no apparent cause for this additional space below my social ic ...

htmlcsstwitter-bootstrap

Changing CSS image properties: A step-by-step guide

I've come across a strange conflict between Twitter Bootstrap (2.2.1) and Ad-Gallery in Internet Explorer. It seems that certain lines in bootstrap.min.css are causing issues, preventing images from displaying: img{max-width:100%;width:auto\9;h ...

csshtmloverriding

Troubleshooting EasyZoom: Problems stemming from CSS and markup structure

Despite following the documentation correctly, I seem to be encountering an issue. There are no JavaScript errors and the DOM changes reflect my interactions. However, when I hover over the thumbnail, the larger image remains fixed at 0, 0. Removing the ea ...

javascriptcsseasyslider

Exploring data in C# using HtmlAgilityPack to extract information from a table

I've been working on a project for some time now, and here's the situation: A friend of mine has a web application that generates data for charts using HTML. I need to extract specific values from a table on his website so that we can store this ...

c#htmlhtml-agility-pack

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

javascriptjqueryhtmlcssajax

A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Check out this simple webpage: https://jsfiddle.net/enxgz2Lm/1/ The webpage is structured with a side menu and a tasks container. Within the tasks container, there is a row container that includes a checkbox, title on the left, and details on the right. ...

htmlcss