CODEWITHSUNDEEP
htmlcol
Cristian Morales
Cristian Morales

Reputation: 17

Why will two column col-8 and col-4 not render side by side in lg view?

Hi guys I have a problem with making the col-8 and col-4 render side by side. I can't think of a good reason that it would not work. The col are supposed to work and fill the col 12.

This is the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="row no-gutters">
      <div class="col-8">
        <img class="img-fluid" src="pic/Indian.jpg" alt="">
      </div>
      <div class="col-md-8">
        <p>
          This reciepie is called Tikka Masala, and its a fovrite in south India.
          The orgin of this dish is unkown to me, but I suppose that I can look
          into it and find out. When I go to Indian restaurants I always order
          this meal because its so good. I think that every one should try this
          food at some point in thier life and many will like it.
        </p>
      </div>
      <div class="col-md-4 bk1">
        <img class="img-fluid" src="pic/Indian.jpg" alt="">
        <p>
          This reciepie is called Tikka Masala, and its a fovrite in south India.
          The orgin of this dish is unkown to me, but I suppose that I can look
          into it and find out. When I go to Indian restaurants I always order
          this meal because its so good. I think that every one should try this
          food at some point in thier life and many will like it.
        </p>

      </div>
    </div>
  </div>

</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>

Please let me know if you have any idea.

Thanks!!

Upvotes: 0

Views: 85

Answers (1)

KashyapVadi
KashyapVadi

Reputation: 505

The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

can you change any other functionality you can add extra stylesheet.

Upvotes: 1

Related Questions