DIV list next to a ASIDE DIV

HTML & CSS
1

I’m a newbie to websites coding but i know a littel bit about it and im trying to make a page to display a DIV as a list next to a ASIDE DIV but I cant get them to be next to each other.

Like This
Like This1075×889 26.3 KB

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Modern Business - Start Bootstrap Template</title>

        <!-- Bootstrap core CSS -->
        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      

        <!-- Custom styles for this template -->
        <link href="css/modern-business.css" rel="stylesheet">

    </head>

    <body>

        <!-- Navigation -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="index.html">Start Bootstrap</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="about.html">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="services.html">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Portfolio
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
                                <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
                                <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
                                <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
                                <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
                                <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
                            </div>
                        </li>
                        <li class="nav-item active dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Blog
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                                <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
                                <a class="dropdown-item active" href="blog-home-2.html">Blog Home 2</a>
                                <a class="dropdown-item" href="blog-post.html">Blog Post</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Other Pages
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                                <a class="dropdown-item" href="full-width.html">Full Width Page</a>
                                <a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
                                <a class="dropdown-item" href="faq.html">FAQ</a>
                                <a class="dropdown-item" href="404.html">404</a>
                                <a class="dropdown-item" href="pricing.html">Pricing Table</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Page Content -->
        <div class="container">
            <!-- Page Heading/Breadcrumbs -->
            <h1 class="mt-4 mb-3">Blog Home Two
                <small>Subheading</small>
            </h1>

            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="index.html">Home</a>
                </li>
                <li class="breadcrumb-item active">Blog Home 2</li>
            </ol>

            <aside class="col-sm-3">

                <div class="card card-filter">
                    <article class="card-group-item">
                        <header class="card-header">
                            <a class="" aria-expanded="true" href="#" data-toggle="collapse" data-target="#collapse22">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">By Category</h6>
                            </a>
                        </header>
                        <div style="" class="filter-content collapse show" id="collapse22">
                            <div class="card-body">
                                <form class="pb-3">
                                    <div class="input-group">
                                        <input class="form-control" placeholder="Search" type="text">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
                                        </div>
                                    </div>
                                </form>

                                <ul class="list-unstyled list-lg">
                                    <li><a href="#">Cras justo odio <span class="float-right badge badge-light round">142</span> </a></li>
                                    <li><a href="#">Dapibus ac facilisis  <span class="float-right badge badge-light round">3</span>  </a></li>
                                    <li><a href="#">Morbi leo risus <span class="float-right badge badge-light round">32</span>  </a></li>
                                    <li><a href="#">Another item <span class="float-right badge badge-light round">12</span>  </a></li>
                                </ul>  
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                    </article> <!-- card-group-item.// -->
                    <article class="card-group-item">
                        <header class="card-header">
                            <a href="#" data-toggle="collapse" data-target="#collapse33">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">By Price  </h6>
                            </a>
                        </header>
                        <div class="filter-content collapse show" id="collapse33">
                            <div class="card-body">
                                <input type="range" class="custom-range" min="0" max="100" name="">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>Min</label>
                                        <input class="form-control" placeholder="$0" type="number">
                                    </div>
                                    <div class="form-group text-right col-md-6">
                                        <label>Max</label>
                                        <input class="form-control" placeholder="$1,0000" type="number">
                                    </div>
                                </div> <!-- form-row.// -->
                                <button class="btn btn-block btn-outline-primary">Apply</button>
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                    </article> <!-- card-group-item.// -->
                    <article class="card-group-item">
                        <header class="card-header">
                            <a href="#" data-toggle="collapse" data-target="#collapse44">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">By Feature </h6>
                            </a>
                        </header>
                        <div class="filter-content collapse show" id="collapse44">
                            <div class="card-body">
                                <form>
                                    <label class="form-check">
                                        <input class="form-check-input" value="" type="checkbox">
                                        <span class="form-check-label">
                                            <span class="float-right badge badge-light round">5</span>
                                            Samsung
                                        </span>
                                    </label>  <!-- form-check.// -->
                                    <label class="form-check">
                                        <input class="form-check-input" value="" type="checkbox">
                                        <span class="form-check-label">
                                            <span class="float-right badge badge-light round">13</span>
                                            Mersedes Benz
                                        </span>
                                    </label> <!-- form-check.// -->
                                    <label class="form-check">
                                        <input class="form-check-input" value="" type="checkbox">
                                        <span class="form-check-label">
                                            <span class="float-right badge badge-light round">12</span>
                                            Nissan Altima
                                        </span>
                                    </label>  <!-- form-check.// -->
                                    <label class="form-check">
                                        <input class="form-check-input" value="" type="checkbox">
                                        <span class="form-check-label">
                                            <span class="float-right badge badge-light round">32</span>
                                            Another Brand
                                        </span>
                                    </label>  <!-- form-check.// -->
                                </form>
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                    </article> <!-- card-group-item.// -->
                </div> <!-- card.// -->
            </aside>
            <!-- Blog Post -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-5">
                            <a href="#">
                                <img class="img-fluid rounded" src="http://placehold.it/750x300" alt="">
                            </a>
                        </div>
                        <div class="col-lg-6">
                            <h2 class="card-title">Post Title</h2>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
                            <a href="#" class="btn btn-primary">Read More &rarr;</a>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    Posted on January 1, 2017 by
                    <a href="#">Start Bootstrap</a>
                </div>
            </div>
        </div>
        <!-- /.container -->
        <!-- Footer -->
        <footer class="py-5 bg-dark">
            <div class="container">
                <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
            </div>
            <!-- /.container -->
        </footer>

        <!-- Bootstrap core JavaScript -->
        <script src="vendor/jquery/jquery.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    </body>

</html>

I changed the width of the card DIV but it stayed in on the bottom under the ASIDE DIV.

Is there any way to get them to be next to each other?

Thanks in advacne

2

Hi,

First and foremost bootstrap is a grid system which is controlled by using elements in a specific order to create the layout you want. Take a look at the documentation for examples of how to produce columns.

You can’t create columns without having a parent .row which itself must be inside a container. To have two columns you would for example have a col-sm-3 (as you have done) but then the next column would be col-sm-9 and take up the remaining space. Both columns would be immediate children of .row.

e.g. like this:

<div class="container">
  <div class="row">
    <div class="col-sm-3">left stuff</div>
    <div class="col-sm-9">right stuff</div>
  </div>
</div>

In your page that would look like this:

<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container"> <a class="navbar-brand" href="index.html">Start Bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li>
        <li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
        <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Portfolio </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio"> <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a> <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a> <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a> <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a> <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a> </div>
        </li>
        <li class="nav-item active dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Blog </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a> <a class="dropdown-item active" href="blog-home-2.html">Blog Home 2</a> <a class="dropdown-item" href="blog-post.html">Blog Post</a> </div>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other Pages </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> <a class="dropdown-item" href="full-width.html">Full Width Page</a> <a class="dropdown-item" href="sidebar.html">Sidebar Page</a> <a class="dropdown-item" href="faq.html">FAQ</a> <a class="dropdown-item" href="404.html">404</a> <a class="dropdown-item" href="pricing.html">Pricing Table</a> </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container"> 
  <!-- Page Heading/Breadcrumbs -->
  <h1 class="mt-4 mb-3">Blog Home Two <small>Subheading</small> </h1>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"> <a href="index.html">Home</a> </li>
    <li class="breadcrumb-item active">Blog Home 2</li>
  </ol>
  <div class="row">
    <aside class="col-sm-3">
      <div class="card card-filter">
        <article class="card-group-item">
          <header class="card-header"> <a class="" aria-expanded="true" href="#" data-toggle="collapse" data-target="#collapse22"> <i class="icon-action fa fa-chevron-down"></i>
            <h6 class="title">By Category</h6>
            </a> </header>
          <div style="" class="filter-content collapse show" id="collapse22">
            <div class="card-body">
              <form class="pb-3">
                <div class="input-group">
                  <input class="form-control" placeholder="Search" type="text">
                  <div class="input-group-append">
                    <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
                  </div>
                </div>
              </form>
              <ul class="list-unstyled list-lg">
                <li><a href="#">Cras justo odio <span class="float-right badge badge-light round">142</span> </a></li>
                <li><a href="#">Dapibus ac facilisis <span class="float-right badge badge-light round">3</span> </a></li>
                <li><a href="#">Morbi leo risus <span class="float-right badge badge-light round">32</span> </a></li>
                <li><a href="#">Another item <span class="float-right badge badge-light round">12</span> </a></li>
              </ul>
            </div>
            <!-- card-body.// --> 
          </div>
          <!-- collapse .// --> 
        </article>
        <!-- card-group-item.// -->
        <article class="card-group-item">
          <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#collapse33"> <i class="icon-action fa fa-chevron-down"></i>
            <h6 class="title">By Price </h6>
            </a> </header>
          <div class="filter-content collapse show" id="collapse33">
            <div class="card-body">
              <input type="range" class="custom-range" min="0" max="100" name="">
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label>Min</label>
                  <input class="form-control" placeholder="$0" type="number">
                </div>
                <div class="form-group text-right col-md-6">
                  <label>Max</label>
                  <input class="form-control" placeholder="$1,0000" type="number">
                </div>
              </div>
              <!-- form-row.// -->
              <button class="btn btn-block btn-outline-primary">Apply</button>
            </div>
            <!-- card-body.// --> 
          </div>
          <!-- collapse .// --> 
        </article>
        <!-- card-group-item.// -->
        <article class="card-group-item">
          <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#collapse44"> <i class="icon-action fa fa-chevron-down"></i>
            <h6 class="title">By Feature </h6>
            </a> </header>
          <div class="filter-content collapse show" id="collapse44">
            <div class="card-body">
              <form>
                <label class="form-check">
                  <input class="form-check-input" value="" type="checkbox">
                  <span class="form-check-label"> <span class="float-right badge badge-light round">5</span> Samsung </span> </label>
                <!-- form-check.// -->
                <label class="form-check">
                  <input class="form-check-input" value="" type="checkbox">
                  <span class="form-check-label"> <span class="float-right badge badge-light round">13</span> Mersedes Benz </span> </label>
                <!-- form-check.// -->
                <label class="form-check">
                  <input class="form-check-input" value="" type="checkbox">
                  <span class="form-check-label"> <span class="float-right badge badge-light round">12</span> Nissan Altima </span> </label>
                <!-- form-check.// -->
                <label class="form-check">
                  <input class="form-check-input" value="" type="checkbox">
                  <span class="form-check-label"> <span class="float-right badge badge-light round">32</span> Another Brand </span> </label>
                <!-- form-check.// -->
              </form>
            </div>
            <!-- card-body.// --> 
          </div>
          <!-- collapse .// --> 
        </article>
        <!-- card-group-item.// --> 
      </div>
      <!-- card.// --> 
    </aside>
    
    <!-- Blog Post -->
    <div class="card mb-4 col-sm-9">
      <div class="card-body">
        <div class="row">
          <div class="col-lg-5"> <a href="#"> <img class="img-fluid rounded" src="http://placehold.it/750x300" alt=""> </a> </div>
          <div class="col-lg-6">
            <h2 class="card-title">Post Title</h2>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
            <a href="#" class="btn btn-primary">Read More &rarr;</a> </div>
        </div>
      </div>
      <div class="card-footer text-muted"> Posted on January 1, 2017 by <a href="#">Start Bootstrap</a> </div>
    </div>
  </div>
  <!-- row.// --> 
</div>
<!-- /.container --> 
<!-- Footer -->
<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
  </div>
  <!-- /.container --> 
</footer>

You should step back a little and work your way through the grid documentation or you will continue to fall foul of these methods :slight_smile:

3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.