Twitter Bootstrap Question posted in

Html Bootstrap4 – three columns-Twitter bootstrap

I created one container with one row with 3 columns but I dont get 3 columns at all I get only one long column with all content. Any idea why?
I am using Bootstrap 4.

<?php require_once($_SERVER['DOCUMENT_ROOT'].'/core/config.php'); // Define DIR atc ?>
    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php if(isset($title)){ echo $title; }?></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    </head>
    <body>   
     <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3"><?php include(DIR .'includes/ads.php');?></div>
            <div class="col-lg-5"><?php include(DIR .'includes/article.php');?></div>
            <div class="col-lg-4 d-flex flex-column"><?php include(DIR .'includes/sidebar.php');?></div>
            </div>
        </div>
    </body>
    </html>
Tags:

2

Answers


  1. 0

    Well, you used the lgclasses – these are for large monitors. Load it on a large monitor, then you’ll see the three next to each other.

    If you make the window narrower, they go below each other – that’s Bootstrap responsivity;

    To get get 3 columns also on smaller screens, use the regular classes, like col-5, col-4 etc. And – and that’s the big advantage of Bootstrap – you can also combine several classes for different sizes in the same element, like <div class="col-6 col-lg-3">, which would result in 2 columns each on a small monitor or 4 columns each on a large monitor.

    In this codepen I put your code on top and then copied it once, using the regular col--classes:

    https://codepen.io/anon/pen/qxRXPK

    Login or Signup to reply.
  2. 0

    Add col-sm and col-md css classes to be more specific for different display resolutions

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search