I am beginner of bootstrap, just using "Starter template" to see grid result, but I can't see three column of "col-lg-4" showing in one row, attached code, I don't see any script error,
and my display resolution 1280 * 1024 .please help. thanks a lot.
suppose in one row, but in 3 row
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-lg-4" style="border: 1px solid red;">11111</div>
<div class="col-lg-4" style="border: 1px solid red;">22222</div>
<div class="col-lg-4" style="border: 1px solid red;">33333</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
The code should give exactly 4 grids to each div exactly as you have specified it to do if your screen size is greater than
1200px. In bootstrap-3 that you are using,lgspecifies screen that is greater than or equal to1200px. So your screen size falls in this category. Consider your piece of code below -<div class="col-lg-4". What this specifies is, use 4 grids of bootstrap grid system when the screen size islgand 12 grids in all other case (which is the default if not specified for other screen sizes).You can check your screen resolution from here. Make sure if its greater than 1200px. You can run the program from here. You will see than as long as the screen size remains >= 1200px, each divs get 4 grids and remain on the same row.
If you want 3 grids for each div and you are not getting it with
col-lg-4, you should probably trycol-md-4, which will place all divs on the same row even on a medium size screen(laptop screens : 992px - 1200px) and it should work for you.