0

So i am creating a tribute page in which you can view here --> https://codepen.io/Mike-was-here123/pen/xpEqWX

This is all based on the jumbotron in which you can find on lines 2 & 3 of the code.

This is col-lg-8 with offset-lg-2 to center it, 1920px width:

This is also col-lg-8 in effect, with a width of 993px:

Then it finally switches over to col-md-12 at around 990px. This now makes it so the jumbotron takes up all 12 columns giving the text more space:

As you can see, there is lots of range for the lg. It has the same affect at 1000px as 1920px. This can make it annoying as my lg setting looks good at 1920px, but by around 1000px it still hasn't switched over to md, causing the images to be awkwardly small. This is around a 1000px difference and is messing me up. Is there anyway i can go in between lg and md, and so with any other size? Is it a class like col-lg- that i can use to maybe add 10 columns and 1 offset at the halfway point between lg and md? Would i have to check using @media (css) to then change the columns that way if possible?

Leed
  • 263
  • 2
  • 4
  • 11

2 Answers2

1

Instead of

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

could you use?

<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
hayden
  • 2,643
  • 17
  • 21
  • To fine tune the breakpoints further write custom `@media` queries or change the default `$grid-breakpoints` https://getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid I'm not sure if it's possible to do the former inside codepen – hayden Jan 04 '18 at 05:52
  • Yeah i'm a little confused on it... The ```xl``` still takes up ```600px``` causing most of the same affect. – Leed Jan 04 '18 at 15:25
0

just use

<div class="col-xs-12 col-lg-6">
duy nguyen
  • 79
  • 1
  • 3