Bootstrap layout is based on a 12*12 grid. Your content is col-lg-8
, which means it takes up 8 columns on large screens.
I’m not on the most idiomatic fix in Bootstrap, but one way would be to add an empty div.col-lg-2
before (then you have 2 columns before, 8 during, and 2 after). Then you can add other classes to change that on different screen sizes. For example, you could have an empty div.col-lg-2.col-sm-0
followed by a content-filled div.col-lg-8.col-sm-12
, which would make your content expand to the whole screen width on small screens.
1 Like
Thank you. That fixed it.
I had tried something similar to create the 12 columns, but my idea hadn’t worked.