Its hard for me to explaint what i want, so i made a mocup
How to make that with bootstrap 4? So goal is that those 4 elements on the right are all the time (except on mobile) equal height like element on the left (image). Can someone help with that? Here is makrup for now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="http://placehold.it/700x300/ccc/333.png?text=placeholder" alt=""></div>
<div class="col col-md-4">
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
<div class="contentMy">somthing</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
You can use Bootstrap 4's new flexbox utility classes. The d-flex class is used for display:flex, and then flex-column is used to set flex-direction: column..
<div class="container">
<section class="hero">
<div class="row">
<div class="col col-md-8"><img src="" alt=""></div>
<div class="col col-md-4 d-flex flex-column">
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
<div class="contentMy h-100">somthing</div>
</div>
</div>
</section>
</div>
http://www.codeply.com/go/YyTEyi4IcU
Related
i have used container class for the parent div
here:
<div class="container">
<main role="main" class="pb-3">
<div style="width:100%; height:300px;z-index:-1" class="col-lg-12 mt-n4 bg-white text-
center">
<div style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform:
translate(-50%,
-50%);transform: translate(-50%, -50%);">
<img class="rounded-circle border border-info p-1" style="width:150px;height:150px;"
src="~/ProfileImages/#currentuser.ImageProfile">
<h4 class="text-center font-weight-bold text-info">#Model.ApplicationUser.ArName</h4>
</div>
</div>
</main>
</div>
now: i want to make width for div inside the parent 100% but i could not with this code:
<div style="width:100%; height:300px;z-index:-1" class="col-lg-12 mt-n4 bg-white text-center">
<div style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,
-50%);transform: translate(-50%, -50%);">
<img class="rounded-circle border border-info p-1" style="width:150px;height:150px;"
src="~/ProfileImages/#currentuser.ImageProfile">
<h4 class="text-center font-weight-bold text-info">#Model.ApplicationUser.ArName</h4>
</div>
</div>
how can i remove bootstrap "container" class effects on child element?
//Try this One, It works fine and responsive in all widths and no need to write that much css
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body style="width: auto;height: auto;">
<div class="container mt-2">
<div class="card bg-white text-
center" style="width:20rem">
<img class="img-fluid card-img-top"
src="https://cnet2.cbsistatic.com/img/-e95qclc6pwSnGE2YccC2oLDW_8=/1200x675/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg">
<div class="card-body">
<h4 class="text-center font-weight-bold text-info">#Model.ApplicationUser.ArName</h4>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>
Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
I am writing and example application using bootstrap 4 and php. I am trying to get two columns to display next to each other at a certain breakpoint. Here is an example. What can I do to solve this?
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 col-sm-6">
<?php for($i=0; $i<10; $i++)
{
?>
<div>
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
The most important thing to remember about Bootstrap is that each row must have columns that add up to 12. Instead of putting col-sm-6 on each of your record container, what you'll want to do is instead put row on that, and add col-6 to each of the <div> record elements outputted inside of your PHP loop.
This can be seen in the following:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 row">
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
<div class="col-6">
Record
<hr/>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Also, note that col-6 will apply to all widths in Bootstrap 4, whereas col-sm-6 will only apply to widths larger than 575px:
It appears you've got mismatched number of columns.
I suspect this bit...
<div class="col-lg-3 col-sm-12">
should be...
<div class="col-lg-3 col-sm-6">
is this you want:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-3" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-9">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
<div class="col-lg-9 col-sm-3">
<?php for($i=0; $i<10; $i++)
{
?>
<div>
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
https://jsfiddle.net/48n2hvyd/3/
Thanks for or your help. After reading your answers I worked it out. This is what I needed:
<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<div class="col-lg-9">
<div class="row">
<?php for($i=0; $i<10; $i++)
{
?>
<div class="col-lg-12 col-sm-6">
Record
<hr/>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?
...
<div class="row pt-4" id="cards">
<div class="card-deck">
// THIS IS THE CARD WITH THE WIDENED BUTTON
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
// THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
<div class="card-body">
<h5 class="card-title">Spirituality</h5>
<p class="card-text">Connect to something larger than yourself</p>
Set a Goal
</div>
</div>
...
</div>
</div>
...
Here's what the buttons look like:
Just wrap your anchor in another div
<div>
Set a Goal
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<div>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
OR
Just add align-items-center class on the flex div
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To you button class, add mx-auto to center the button and mt-auto to push the button at the bottom of the card.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am loading in bootstrap grids to make my site responsive.. However, my div are not reacting to the tempaltes. The idea is that on a standard macbook or a larg screen the divs cover a 3rd of the page. And on mobile 100%. what is wrong with my code. Have i loaded in bootstrap?
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
</div>
<div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv2">
</div>
<div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv3">
</div>
</div>
</body>
</html>
Your classes need an equal sign.
Instead of
class"col-sm-12 col-lg-4 col-md-4"
You need
class="col-sm-12 col-lg-4 col-md-4"
problem in class"col-sm-12 col-lg-4 col-md-4" use (=) like class="col-sm-12 col-lg-4 col-md-4"
.row div{
background-color:pink;
border:1px solid gray;
height:40px;
}
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv2">
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv3">
</div>
</div>
Just a typo: <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
.row > div
{
height:100px;
background:#ccc;
padding:5px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">1
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv2">2
</div>
<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv3">3
</div>
</div>
</div>
</body>
</html>