Bootstrap and large screens

Question

So I've started using Boostrapp and imideately i tried it on my large screen and it looks like it's zoomed out. On tablet and lap top it's fine resolution 1280 but on 1960 it's just zoomed out.

Before using boottrap i solved this problem with em units and just making font size larger for example 105% for media screen 1600, 110% for media screen 1900. And all my buttons, forms, headers adjust. But that doesn't work in bootstrap.

So my question is how do people handle large screens with bootstrap without writing 1000 lines of code for each screen size.

Have you tried using col-lg-12 ? See this reply : [http://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap](http://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap) — Cyssoo, Dec 29 '15 at 11:22
And btn-lg ? (For buttons in Bootstrap 3) You can also use btn-block class. Check main container too, for padding or margin — Cyssoo, Dec 29 '15 at 11:43
Is there any way to change boostrap default 14px font size to 1em 16px? — L.Lawliet, Dec 29 '15 at 12:00
Of course, try overriding default Bootstrap CSS, or modify files using LESS or SASS (better). — Cyssoo, Dec 29 '15 at 12:03

score 1 · Answer 1 · answered Dec 29 '15 at 16:20

1

Use the grid system to your advantage

https://getbootstrap.com/examples/grid/

answered Dec 29 '15 at 16:20

Cosmic Hawk

225
2
9

score 1 · Answer 2 · answered Mar 18 '18 at 18:44

Here's how they do it: they make your own media queries on top of any frameworks they may have.

You can view my website as an example: calumchilds.com. I use the vw measurements, which means once the screen width exceeds a certain width (on my site, I set it to 2100px - the code is at the end of the answer if you are interested), the text sizes are based on the viewport width, using the measurement vw. For example, my <h2> is normally 32px on a normal-sized screen, but on large screens, the text size is 4vw. You can use the vw measurement for buttons, forms, whatever.

Just experiment with the sizes using either your own screen or Google Chrome Dev Tools (I used the latter.) If you have any questions, feel free to comment below.

@media screen and (min-width: 2100px) {
h1 {
    font-size: 5vw !important;
}
h2 {
    font-size: 4vw !important;
}
h3 {
    font-size: 3vw !important;
}
h4 {
    font-size: 2vw !important;
}
h5 {
    font-size: 1vw !important;
}
h6 {
    font-size: 0.5vw !important;
}
body, p, button, .button, .topnav a, label, input, textarea, .socialmediaprofiles a, .social-media {
    font-size: 1.75vw !important; 
}
.topnav a {
    padding: 16% 32%;
}
button, .button {
    padding: 0.5em 1em !important;
    border-width: 0.2vw !important;
}

}

score 0 · Answer 3 · answered Dec 29 '15 at 16:28

0

Bootstrap already added media queries inside the library. To get it work follow the bootstrap guide. Like use the proper grid class for each container (col-lg-12, col-md-12, col-sm-12). For each UI elements Bootstrap has proper style class. For any change if you want to modify anything, try to create some file like bootstrap.override.css to override the css class or styles. Finally better to start with reading the bootstrap guideline.

answered Dec 29 '15 at 16:28

M.M.H.Masud

329
3
8
22

Problem is it's entirely px based. so you have to override all of your elements on page. Then it loses its purpose for fast development. – L.Lawliet Dec 30 '15 at 09:11

Bootstrap and large screens

3 Answers3