0

enter image description here

I have two columns, col-4 and col-8 inside col-12 and row. But the two columns are not in the same row. I am not able to understand why this is happening even when I am not writing any CSS just the bootstrap grid.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row" id="first_row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
      </div>
      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
      </div>
    </div>
  </div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Nahid Hasan
  • 687
  • 1
  • 10
  • 34

2 Answers2

3

The additional parent container of 12 grid is not needed.

The div which is required to remove

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

Also, attached working demo with snippet

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" id="first_row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
    </div>
  </div>
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57
2

Every column needs a row parent in Bootstrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row" id="first_row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <!-- Row added here. -->
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <img src="//placehold.it/64x64" class="img-fluid" alt="Responsive image" id="avater_main">
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
         <!-- And a row here. -->
          <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
l3fty
  • 572
  • 3
  • 16