Bootstrap 3 Full width and height layout with 3 Column Flex or Col

Question

I am a bit stuck with this simple page (I know you might roll eye with it, just bear with me). I have use Bootstrap for many years until something hit me as my manager would like to see it on mobile. I have tried with many different ways but none matched the layout of the next screenshot with a Navbar in the middle. Width is fine for me but I have a problem setting the height.

Also, on desktop I tried to use three columns layout and it looks fine, until I add a middle navbar (it looks bloat and horrible in background), and all the column are not using the correct height, so I suspect the CSS is a bit wrong. I have tried with height:auto or height:fixed but none of them are perfect as you can see on the clip of code I wrote.

I am using this for col but I'm sure that I will tell off that I should use flex.

I am using this background for images, I have look around for template or example but most of them are using one image for a full-width background. not much height with column

    .MainBackgroundImages {
        padding-bottom: 40%; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Here is a snippet I wrote as you can see the height is bit issue.

.leftHalf {
  background-image: url('https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');
}

.centerHalf {
  background-color: black;
  color: white;
  text-align: center
}

.rightHalf {
  background-image: url('https://via.placeholder.com/2000/FFFF00/00000/?text=right');
}

.MainBackgroundImages {
  padding-bottom: 40%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}







  
  
    

    
      
        
          Ishka Sport 
        
        
          
            
              Home
            
            
              kayak
            
            
              Nipper Boards
            
            
              Accessories

Shidersz · Accepted Answer

For a full height layout, you will need to tell the parent element of the columns to get all the available height of the viewport, this can be done defining the next class:

full-height {
  height: 100vh;
}

And assigning this class to the row that wraps the columns. After this, you need to set the height property of the three columns you have to 100% (So they will use 100% height of the parent element).

Now, on small devices (SM), you want the previous layout to change: all the columns will use the 12 available grids of Bootstrap. So, you will have to manage the height of the columns with a media query like the next one (Bootstrap 3 breakpoints are documented here: Bootstrap 3 Media Queries):

@media only screen and (max-width : 992px) {

    .leftHalf {
        height: 40%;
    }

    .centerHalf {
        height: 20%;
    }

    .rightHalf {
        height: 40%;
    }
}

All of the previous explanation is used on the next working example, check it playing with the full screen mode and resizing the browser. It is a homework for you, to correct displaying the layout of the middle navbar. Hope this helps you as the base of the layout you need.

.full-height {
  height: 100vh;
}

.leftHalf {
  background-image: url('https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');
  height: 100%;
}

.centerHalf {
  background-color: black;
  color: white;
  text-align: center;
  height: 100%;
}

.rightHalf {
  background-image: url('https://via.placeholder.com/2000/FFFF00/00000/?text=right');
  height: 100%;
}

.MainBackgroundImages {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Custom style for Small Devices, Tablets */
@media only screen and (max-width : 992px) {

    .leftHalf {
        height: 40%;
    }

    .centerHalf {
        height: 20%;
    }

    .rightHalf {
        height: 40%;
    }
}















  

  
    
      
        Ishka Sport
        
      
      
        
          Home
          kayak
          Nipper Boards
          Accessories

Bootstrap 3 Full width and height layout with 3 Column Flex or Col

Answers (1)

Related Questions