Spacing between cards in Bootstrap html only no css

Topic: Spacing between cards in Bootstrap html only no css

huskersippi 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]

Add comment

MDBootstrap staff pro premium priority answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: 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

huskersippi

5Support score
1Questions 0Answers

0Snippets likes 0Snippets