CODEWITHSUNDEEP
bootstrap-4
Ms Designer
Ms Designer

Reputation: 263

Bootstrap 4 column system is not working for me

I have used this code but col is not working. It comes 1 below another. I tried checking same query but didn't find an answer. 

<div class="row">
   <div class="col col-lg-6">
    <h3>HOME</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
        <div class="col col-lg-6"><img src="imgs/tabs/left-1.png"></div>
    </div>

Upvotes: 0

Views: 78

Answers (3)

Swati
Swati

Reputation: 496

Col is working properly, you need to check your CDN for bootstrap.

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

Upvotes: 0

sina_r
sina_r

Reputation: 524

You are missing the link to bootstrap. You can learn how to get started with bootstrap here: Bootstrap Get started

Also you can learn about the different grid systems here: Bootstrap Grid

For now this code should work: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
    <div class="row">
        <div class="col col-lg-6">
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         </div>

         <div class="col col-lg-6"><img src="imgs/tabs/left-1.png"></div>
         </div>
</body>
</html>

EDIT:

In your provided website link the row class is not set to the parent div correctly. Please change the class "col-lg-12" into "row" like this: 

<div class="row">
    <div class="col-lg-6">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="col-lg-6"><img src="imgs/tabs/left-1.png" class="img-fluid"></div>
    </div>

Upvotes: 1

Michael
Michael

Reputation: 99

try below:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="row">
        <div class="col col-lg-12">
            <div class="col col-lg-6">
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            </div>
            <div class="col col-lg-6"><img src="imgs/tabs/left-1.png"></div>
        </div>
    </div>

Upvotes: 0

Related Questions