Topic: Spacing between cards in Bootstrap html only no css

huskersippi free asked 5 years ago


Expected behavior I would like spacing between cards appear as the image ive attached Actual behavior cards are currently close together without spacing Resources (screenshots, code snippets etc.)

<div class="col-xs-1 col-sm-1 col-md-2">
  <div class="calcite-web">
    <div class="text-center">
       <div class="row align-items-center">
        <img alt="....." class="card-image" src="https://......." style="width:150px;height:150px;" &gt;="" <div="">
          </div>
        </div>
      </div>
      <div class="card-content">
        <h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>

        <div aria-label="actions" class="btn-group btn-group-justified" role="group">
          <a class="btn btn-primary" href="#">View</a>
        </div>
      </div>
    </div>
    <div class="col-xs-1 col-sm-1 col-md-2">
        </div>
      </div>
      <div class="card-content">
        <h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>

        <div aria-label="actions" class="btn-group btn-group-justified" role="group">
          <a class="btn btn-primary" href="#">View</a>
        </div>
      </div>
    </div>
        </div>
      </div>
      <div class="card-content">
        <h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>

        <div aria-label="actions" class="btn-group btn-group-justified" role="group">
          <a class="btn btn-primary" href="#">View</a>
        </div>
      </div>
    </div>
        </div>
      </div>
      <div class="card-content">
        <h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>

        <div aria-label="actions" class="btn-group btn-group-justified" role="group">
          <a class="btn btn-primary" href="#">View</a>
        </div>
      </div>
    </div>![enter image description here][1]

MDBootstrap staff answered 5 years ago


Hi huskersippi,

Your code has many issues. I actually can't even test your example because of many problems: - starting with div with class col? - bootstrap requires col to be inside row and row inside container - what is class "calcite-web" - you are using row without col's inside - card-content without main card structure - your code in the post you shared above is weirdly styled.

Please, create snippet that will show your problem. Please, create a view that will display exactly what you actually have right now in your development. I will edit your snippet-code to serve your need.

Best Regards, Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.3
  • Device: pc
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No