CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Berisko
Berisko

Reputation: 643

Position "list-group" on the right side, while "cards" are on the left side, Bootstrap

I'm a bit confused while learning and putting together website with Bootstrap grid system. I'm making a menu that consists of 3 blocks - "cards" and one more fixed (that follows when you're scrolling) "list-group". Have been trying using float:right etc., but when I change something that pulls the "list-group" right, everything breaks.

enter image description here

HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">

      <div class="side">
        <div class="row">
          <div class="col-sm-3" style="background:red">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="row">
          <div class="col-sm-3" style="background:cyan">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:yellow">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:orange">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="w-100"></div>

          <div class="col-sm-3" style="background:red">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

Appreciating every helpful answer I get!

Upvotes: 1

Views: 2092

Answers (2)

Cory Kleiser
Cory Kleiser

Reputation: 2024

So I've gotten the best results with supplemental CSS. First you'll have to make a couple changes to your html. First, change the class on your list to col-sm-12 instead of col-sm-3. This is going will make sense when you add the below CSS. The second change to you HTML would be to change your container to container-fluid. This is not necessary but it makes it look cleaner in my opinion. Once you have that set up you can add the following CSS to fix your list to the side of the page at about the center vertically:

@media(min-width:576px){
  .side{
    position: fixed;
    right: 0;
    top: 40%;
    width:25%;
    max-width: 25%;
    padding-left:15px;
  }
}

This css will fix the list so it stays put, even while scrolling. The right: 0; fixes it to the right side of the page and the and the top:40%; pushes it down to about the center of the page; you can play around with the top value to get it exactly where you want depending on the length of the list. Here is a code snippet of this so you can see it in action:

@media(min-width:576px) {
  .side {
    position: fixed;
    right: 0;
    top: 40%;
    width: 25%;
    max-width: 25%;
    padding-left: 15px;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid">

  <div class="side">
    <div class="row">
      <div class="col-sm-12" style="background:red">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
          <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
        </div>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="row">
      <div class="col-sm-3" style="background:cyan">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-3" style="background:yellow">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-3" style="background:orange">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

      <div class="w-100"></div>

      <div class="col-sm-3" style="background:red">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text.</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

Hope this helps you out.

Upvotes: 1

patelarpan
patelarpan

Reputation: 8021

try out this code

.container {
  position: relative;
}
.side {
 position: absolute;
 right: 0;
 top:0;
 bottom: 0;
 width: 250px;
 z-index: 1;
 background-color: #fff;
}

.content {
  margin-right: 250px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">

      <div class="side">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            </div>
      </div>

      <div class="content">
        <div class="row">
          <div class="col-sm-3" style="background:cyan">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:yellow">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:orange">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="background:red">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

Using bootstrap

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
       <div class="row no-gutters">
          <div class="col-lg-9 col-sm-8">
             <div class="content">
        <div class="row">
          <div class="col-sm-6" style="background:cyan">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6" style="background:yellow">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6" style="background:orange">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6" style="background:red">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text.</p>
              </div>
            </div>
          </div>

        </div>
      </div>
          </div>
          <div class="col-lg-3  col-sm-4">
                <div class="side">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">Dapibus ac</a>
              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            </div>
      </div>

          </div>
       <div>

   
      
      

    </div>

Upvotes: 1

Related Questions