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>
Related
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 playing with offset and margins on bootstrap 4, i want to achieve
something like this picture everything is working except white spaces between boxes, when you go to medium size there is blue and yellow box next to each other but when i put mr-md-2 then blue box goes down, why ? i want white spaces between all boxes and sizes like in picture
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row grid " >
<div class="col-xs-12 col-sm-6 col-md-4 mr-md-2 col-lg-3 offset-lg-3 " style="background-color:burlywood; height:200px;"></div>
<div class="col-xs-12 col-sm-6 col-md-4 ml-md-2 col-lg-3 " style="background-color:orange; height:200px;"></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 mt-md-2 mt-md-3 col-md-4 col-lg-6 " style="background-color:black;height:200px; "></div>
<div class="col-xs-12 col-sm-6 col-md-4 mt-md-2 offset-md-4 col-lg-3 offset-lg-3 " style="height:200px;background-color:red; "></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 mt-md-2 offset-md-4 col-lg-3 offset-lg-0 " style="background-color:yellow;height:200px; "></div>
<div class="col-xs-12 col-sm-6 col-md-4 mt-md-2 mr- col-lg-3 mr-lg-0 offset-lg-6 " style="background-color:blue; height:200px;"></div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Consider that in the BS Grid system there are no margins between columns (or between rows for that matter) but there are gutters:
Run this snippet in a full screen and resize your window:
.row > div {
/* background-color: lightsteelblue; */
margin-top:20px;
}
.content {
background-color: burlywood;
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<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.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>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3">
<div class="content">r1c1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="content">r1c2</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-6">
<div class="content">r2c1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-3 ">
<div class="content">r2c2</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-0 ">
<div class="content">r3c1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-6">
<div class="content">r3c2</div>
</div>
</div>
</div>
I'm improving my bootstrap skills, i have done these boxes according to that picture, but need to put white spaces between boxes like on the picture you can see, i have tried padding and margin but its not affecting every box somehow, any idea, how to put spaces between boxes?
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
</head>
<body>
<div class="row grid " >
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3 " style="background-color:red; height:200px;"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 " style="background-color:blue; height:200px;"></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 " style="background-color:yellow; height:200px;"> </div>
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-3 " style="background-color:burlywood; height:200px;"></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-0 " style="background-color:black; height:200px;"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-6 " style="background-color:orange; height:200px;"></div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Add another div in the col-* 's div and add the height and color on it instead of the col-* divs. Also add p-1 class to all the col divs.
One sample is as shown below
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3 p-1" >
<div style="background-color:red; height:200px;"></div>
</div>
Also one more thing, as your content is having row elements it must be wrapped in a container-fluid div. As you have not added it, a horizontal scroll bar can be seen. I have fixed that too in the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row grid " >
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3 p-1" ><div style="background-color:red; height:200px;"></div></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 p-1" ><div style="background-color:blue; height:200px;"></div></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 p-1"> <div style="background-color:yellow;height:200px; "></div></div>
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-3 p-1 " ><div style="height:200px;background-color:burlywood; "></div></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-0 p-1" ><div style="background-color:black;height:200px; "></div></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-6 p-1"><div style="background-color:orange; height:200px;"></div></div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
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
I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?
I tried like that, but not working. :
<div class="row">
<div class="col-md-6" id="div1">
Some content...
</div>
<div class="col-md-6" id="div2">
<div id="div2-1" style="height:50%;">
</div>
<div id="div2-2" style="height:50%;">
</div>
</div>
</div>
Try this...
div {
border: 1px solid black;
}
#div2-1,
#div2-2 {
height: 50%;
border: 1px solid red !important;
}
#div1,#div2{
height:50px;
}
#div2.col-xs-6
{
padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6" id="div1">
Some content...
</div>
<div class="col-xs-6" id="div2">
<div id="div2-1">
</div>
<div id="div2-2">
</div>
</div>
</div>
</div>
Using Bootstrap 4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="col-md-6 mw-100 bg-danger"></div>
<div class="col-md-6 mw-100 bg-success"></div>
</div>
</div>
</div>
<style>
/* just for displaying correctly without content */
[class*='col'] {
min-height: 200px;
}
</style>
you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.
But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.
$(document).ready(function() {
var totHeight = $("#col").height();
$("#div-1").css("height", totHeight / 2);
$("#div-2").css("height", totHeight / 2);
})
body * {
color: #ccc;
}
#div-1,
#div-2 {
overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-sm-6" id="col">
<div id="div-1" style="background-color:red;">
Content
<br>Content
</div>
<div id="div-2" style="background-color:blue;">
Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
</div>
</div>
<div class="col-sm-6"></div>
</div>
</body>
hello try the below fiddle hope it helps also add the custom style if you want to
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="navigation">
<label>side Column</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>First Divider</label>
</div>
<div id="text2">
<label>second Divider</label>
</div>
</div>
</div>
</div>
fiddle demo
//Try this one...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
<div class="col-md-6" border="1">
<h3>First Column</h3>
</div>
<div class="col-md-6" border="1">
<div class="row bg-danger">
<h3>Second Column First Row<h3>
</div>
<div class="row bg-success">
<h3>Second Column Second Row</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>
.cn {
background-color: antiquewhite;
height: 50%;
top: 50%;
position: relative;
}
.video-player-container{
height: 500px;
background-color: gray;
}
.video-container{
min-height: 350px;
}
</style>
<body>
<h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
<div class="cn"></div>
</div>
</body>
</html>
Suprisingly super easy with Bootstrap 5 flex
Probably i am missing something
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="flex-fill bg-danger">Part 1</div>
<div class="flex-fill bg-success">Part 2</div>
</div>
</div>
</div>