Bootstrap 4 Grid System

200 Views Asked by At

Having trouble implementing Bootstrap Grid System on Rails

I created a partial for sidebar so I wouldn't have to copy it to all of my views. The solution I went for in my

application.html.erb

<div class="container-fluid">
  <div class="row-fluid">
      <div class="col-lg-8"><%= yield %></div>
      <div class="col-md-4"><%= render 'layouts/sidebar' %></div>
  </div>
  <!-- /.row -->
</div>

index.html.erb (start)

    <!-- Page Content -->
<div class="container">

  <div class="row">

    <!-- Blog Entries Column -->
    <div>

      <h1 class="my-4">Page Heading
        <small>Secondary Text</small>
      </h1>

      <!-- Blog Post -->
      <div class="card mb-4">
        <img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
        <div class="card-body">
          <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 class="card-footer text-muted">
          Posted on January 1, 2017 by
          <a href="#">Start Bootstrap</a>
        </div>
      </div>

_sidebar.html.erb

        <div>
      <!-- Search Widget -->
      <div class="card my-4">
        <h5 class="card-header">Search</h5>
        <div class="card-body">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="button">Go!</button>
            </span>
          </div>
        </div>
      </div>

Current Problem

What it should look like-- https://blackrockdigital.github.io/startbootstrap-blog-post/

1

There are 1 best solutions below

1
Gerald Matthew Concepcion On

Solved it by replacing row-fluid from my application.html.erb with just row. If someone could explain to me why that was happening that would really help me a lot on my journey in learning web application development. Thanks!