CODEWITHSUNDEEP
htmlbootstrap-4
Prokrative
Prokrative

Reputation: 3

Bootstrap cards won't fit together on page

Basically, I am new to HTML and learning how to make a website and I'd like to put two bootstrap cards side by side on the page with a blank space in the middle to separate the two.

When I put both the cards in they automatically go underneath one another instead of side by side. I tried deleting and adding the column again, I tried tweaking the card sizes but can't think or find anything to solve the issue.

Below is the code for the entire site and a picture of how it appears on the site (It's a bit long sorry).

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <title>Form builder</title>
</head>

<body>
  <div>
    <!-- Script -->
    <script src="jquery.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="bootbox/bootbox.js"></script>


  </div>

  <!--                       Title for page
  <div class="container">
   <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Form Builder</a>
    </div>
  </nav>
</div> -->

  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-lg bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Kelsey</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Site</a>
          </li>
          <!-- Dropdown Menu -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle col-6" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Form Settings</a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">yo 2 yo</a></li>
              <li><a class="dropdown-item" href="#">Add Section</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Form Settings</a></li>
            </ul>
          </li>
          <!--               No Clue what this is 
          <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li> -->
        </ul>
        <!--              Search bar (Not in use)
        <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button></form> -->
      </div>
    </div>
    <!-- End of Nav Bar-->
  </nav>
  <!--      Tabs     -->

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Create Form</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Form Settings</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Save Form</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Form Toolbar</a>
    </li>
  </ul>

  <!-- FIRST ROW FIRST PANEL-->

  <div id="create-form">
    <div class="row" style="padding-top: 20px;"></div>
    <div class="row" style="padding-bottom: 20px;">
      <div class="col-md-1"></div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            HEADER PANEL
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item"> 1</li>
            <li class="list-group-item">0</li>
            <li class="list-group-item">8</li>
          </ul>
        </div>
      </div>

      <!-- SECOND PANEL -->
      <div class="col-md-2"></div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            PANEL
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">An item</li>
            <li class="list-group-item">A second item</li>
            <li class="list-group-item">A third item</li>
          </ul>
        </div>
      </div>

    </div>
    <!-- SECOND ROW 3RD PANEL-->
    <div class="card text-bg-primary mb-3 col-md-4">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

    <!-- Experimental card -->

    <div class="card text-bg-dark mb-3 col-md-4">
      <div class="card-header">SCORING MATRIX</div>
      <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text">This can be used to rate processes and experiences.</p>
      </div>
    </div>

  </div>
  <!-- 4TH PANEL -->
  <!-- <div class="col-md-2"></div>
       <div class="col-md-4">
        <div class="card" >
          <div class="card-header">
        SCORING MATRIX
          </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">An item</li>
              <li class="list-group-item">A second item</li>
              <li class="list-group-item">A third item</li>
            </ul>
            </div>
              </div>
            </div>
            
</div> -->

  <!-- <div class="row">
  <div class="col">
    <input class="form-control">
  </div>
  <div class="col">
    <input type="text" class="form-control">
  </div>
</div> -->







  <!-- Moola button <button class="btn btn-info">Moola</button> -->
  <!-- End of Navigation Bar -->
  <!--        Content        -->




  <!-- <script src="jquery.min.js"></script> -->

  <!-- Bootstrap -->
  <!-- <div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div></div></div> -->

  <!-- Bootstrap Modal -->
  <!--<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">1088</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>yo</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-close btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn-save btn btn-primary">Save changes</button>
      </div>
    </div>
  </div></div> -->
  <!-- Moola button-->
  <!--  <button type="button" class="btn btn-dark" id="btn-openmodal">Moola</button> -->









  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  <script src="bootbox/bootbox.js"></script>
   <script src="script.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>

</html>


</div>

Upvotes: 0

Views: 295

Answers (1)

Thyran
Thyran

Reputation: 84

I think the problem is that you use your col-md-x on your cards.
Maybe try wrapping the cards in a col container like this:

<div class="col-md-4">
    <div class="card ...">
        ...
    </div>
</div>

Upvotes: 1

Related Questions