Haii, I wrote the following code using bootstrap:
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-12 ROOD" >
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-6 image GEEL" >
<img src="images/camera.png" class="home">
<h4>Vraag uw foto digitaal op!</h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-6 image GROEN">
<img src="images/card.png" class="home">
<h4>Probeer het proeflidmaatschap!</h4>
</div>
</div>
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 nieuws PAARS">
<h1>..</h1>
</div>
</div>
Which should result in this on mobile devices:
phone
But the two nested rows keep being put on top of each other, whereas they should be placed next to each other on mobile phones. Like this:
How it should be
What I am doing wrong?
Copy the HTML below to begin working with a minimal Bootstrap document.
<!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
Than you need to link bootstrap in you html code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>...</body>
Next you can paste html code from snippet into the body.
.ROOD {
background: red;
}
.GEEL {
background: yellow;
}
.GROEN {
background: green;
}
.PAARS {
background: violet;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-12 ROOD" >
<div class="row">
<div class="col-sm-12 col-xs-6 image GEEL" >
<img src="images/camera.png" class="home">
<h4>Vraag uw foto digitaal op!</h4>
</div>
<div class="col-sm-12 col-xs-6 image GROEN">
<img src="images/card.png" class="home">
<h4>Probeer het proeflidmaatschap!</h4>
</div>
</div>
</div>
<div class="col-sm-8 col-xs-12 nieuws PAARS">
<h1>..</h1>
</div>
</div>
</div>
Related
I am quite new to this and I've already tried on containers and rows and have divided the columns accordingly as required. The current outline gets me a fine webpage on my pc but I am still not getting a responsive page. I know giving media tags could resolve the issue, but I am trying bootstrap v4.6.
<!DOCTYPE html>
<!--Building a github page-->
<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.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
body{
background-color:#a9ba9d;
}
.box{
background-color: #36454f;
margin-bottom: 90px;
}
.fa{
color:white;
padding:15px;
}
.text-center{
padding-left:650px;
color:white;
}
.box2{
background-color:#343434;
margin-top:50px;
margin-left:200px;
padding: 100px 400px 10px 200px;
border-radius:25px;
height: 190px;
}
.boxpart{
background-color:#343434;
padding-bottom:500px;
border-radius:25px;
margin-right: 50px;
width:300px
}
.small-box{
background-color:#343434;
margin:20px;
margin-top: 80px;
padding:70px 0px 50px 0px;
border-radius:25px;
}
.small-box1{
background-color:#343434;
margin:20px;
margin-left:125px;
margin-top:80px;
padding:40px 0px 50px 0px;
border-radius:25px;
}
input{
background-color:#343434;
margin-left:250px;
padding: 2px 2px 2px 5px;
border-radius:10px;
width: 500px;
}
input::placeholder{
color:grey
}
.row{
width:900px;
}
</STYLE>
</head>
<body>
<div class="box">
<span class="fa fa-github fa-2x" ></span>
<span class="text-center">GITHUB</span>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="text-centre boxpart">
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<input type="text" placeholder="Search">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 small-box1"></div>
<div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 box2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have specified the width for several elements. When you set a fixed width on things, they can't be responsive. The .boxpart div will always be 500px wide, so it will overflow on devices smaller than 500px wide. You have also overridden the width of the .row class that comes from Bootstrap and set it at a fixed width. So that also cannot be responsive. It also looks to me like you have some extra s in the right section.
Bottom line here: don't fight the framework. Use what it gives you.
Here's a five-minute clean up of what you have. There's still work to do (like putting your header in a ), so take a look at the bootstrap docs and dig in.
<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.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
body{
background-color:#a9ba9d;
}
.box{
background-color: #36454f;
}
.boxpart{
background-color:#343434;
border-radius:25px;
}
.small-box{
background-color:#343434;
border-radius:25px;
}
input{
background-color:#343434;
border-radius:10px;
}
input::placeholder{
color:grey
}
</STYLE>
</head>
<body>
<div class="box mb-5 text-white">
<i class="fa fa-github fa-2x p-2" ></i>
<span>GITHUB</span>
</div>
<div class="container">
<nav>
</nav>
<div class="row">
<div class="col-md-3">
<div class="text-center boxpart p-5 text-white">
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
</div>
</div>
<div class="col-md-9 mt-3 mt-md-0">
<div class="row ">
<div class="col-12">
<input type="text" class="p-1 w-100" placeholder="Search"/>
</div>
</div>
<div class="row mt-2 mx-0">
<div class="col small-box py-5 text-white text-center">test</div>
<div class="col small-box py-5 text-white text-center">test</div>
<div class="col small-box py-5 text-white text-center">test</div>
</div>
</div>
</div>
</div>
</body>
</html>
try not to use class named row when you also use the built in row in bootstrap to avoid problems, also the grid system in bootstrap works in 12 columns where for example if one div is col-lg-8 and you have 2 divs the other should be col-lg-4 so it can be 12 together.
I also recommend you reading this doc in there official website
https://getbootstrap.com/docs/4.1/layout/grid/
First of all you have some div tag in excess.
Then you have to study the bootstrap breakpoints here : [https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints][1]
If you want the content in columns for mobile you need to add 'col-12' in all your div.
Example:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="text-centre boxpart"></div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<input type="text" placeholder="Search">
<div class="row">
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box1"></div>
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box"></div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 box2"></div>
</div>
</div>
</div>
I hope it was helpful
I can't figure out what is the problem with my code. I'm very new in bootstrap my problem is kinda trivial. One of my field is out of position. I have tried a different route by making only one row and instead of increasing the div sizes I reduced them, but it had the exact same problem. (Run the code in full screen mode).
Please if you can help me out!
.row {
background-color: yellow;
}
.col-sm-3, .col-sm-6 {
border:solid 2px black;
}
div {
height:200px;
}
.two-div {
height:400px;
}
.three-div {
height:600px;
}
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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-3 three-div pull-left">Works</div>
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
With some nesting and pull-right on the appropriate columns you can reverse the float:left and make it work (albeit a hack!)...
http://www.codeply.com/go/rgHEL6DW12
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4 three-div">works</div>
<div class="col-sm-8">works</div>
<div class="col-sm-4 three-div pull-right">works</div>
<div class="col-sm-4 two-div pull-right">works</div>
<div class="col-sm-8 pull-right">
;-)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 two-div">works</div>
<div class="col-sm-12 two-div">works</div>
</div>
</div>
</div>
</div>
Think about it like this...
http://www.codeply.com/go/rgHEL6DW12
Your unhappy smiley box is off because your setting different heights for the containers. I altered your code to explain how you work with BS grid system. See comments.
.row {
background-color: yellow;
}
.col-sm-3,.col-sm-6 {
border:solid 2px black;
}
div { height:200px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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-3 three-div">Works</div> <!-- no need for pulling left. BS does that already -->
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div">Works</div> <!-- no need for pulling right -->
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-9">Works</div> <!-- use -offset-X to move your divs horizontally along the grid -->
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
I have a grid layout where I want a menu on the right in desktop mode, but on the top in mobile. This works fine like this:
<div class="row">
<div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div>
<div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div>
</div>
But, I'd like to add other content directly below the menu on the right in desktop mode and have it move below the main content on mobile.
In other words, I'd like it to end up looking like what this would do on mobile:
<div class="row">
<div class="col-xs-12"><div id="menu"></div></div>
<div class="col-xs-12"><div id="main-content"></div></div>
<div class="col-xs-12"><div id="side-content"></div></div>
</div>
Is there any way to make it so I could have two cells on the right in desktop mode, but have one flow above the main content while the other flows below the main content on mobile?
Edit: Here's a picture of what I mean
Go with the link or below code also may be it can help you -
JSFiddle
HTML Code -
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 menuDiv">
<div id="menu">
<h1>menu</h1></div>
</div>
<div class="col-xs-12 col-sm-8">
<div id="main-content">
<h1>main</h1></div>
</div>
<div class="col-xs-12 col-sm-4 sideDiv">
<div id="side-content">
<h1>side</h1></div>
</div>
</div>
</div>
CSS Code -
#menu{
background-color:#60E877;
}
#main-content{
background-color:#E86060;
}
#side-content{
background-color:#685818;
}
#media(min-width:768px){
.menuDiv, .sideDiv{
float:right;
}
}
Try this it will work--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div>
<div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div>
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;">
<div id="side-content"><h1>side</h1></div></div>
</div>
</div>
</body>
</html>
As you can see, "11111111..." and "22222222..." are overlapping. I think this is because the former exceeds the grid it belongs to, i.e. <div class="col-xs-6 col-lg-4">.
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>11111111111111111111111111111111</h2>
</div>
<div class="col-xs-6 col-lg-4">
<h2>22222222222222222222222222222222</h2>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
It looks like this in my browser(Safari Version 9.1.2 (11601.7.7)):
What am I doing wrong?
Add word-wrap: break-word; to h2 element. because the default setting for word-wrap is normal. which wrap only for limited set of split tokens (example: whitespaces, hyphens).
HTML:
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">11111111111111111111111111111111</h2>
<p class="text-muted ">11111111111111111111111111111111</p>
</div>
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">22222222222222222222222222222222</h2>
<p class="text-muted">22222222222222222222222222222222</p>
</div>
</div>
</div>
CSS:
.w-wrap{
word-wrap: break-word;
}
I'm pretty new with Bootstrap and have stumbled upon an issue:
Here's the HTML of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Watch The Shawshank Redemption</title>
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-md-offset-2">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<img class="img-rounded img-border" src="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE#._V1_SX214_.jpg" />
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<h2 class="pagination-centered">The Shawshank Redemption</h2>
<p>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"><i class="glyphicon glyphicon-time"></i>142 minutes</div>
<div class="col-lg-4 col-md-4 col-sm-4">Release year: 1994</div>
<div class="col-lg-4 col-md-4 col-sm-4">Category: Crime</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="//vjs.zencdn.net/4.1/video.js"></script>
<script src="/Scripts/initializers/initializer.js"></script>
</body>
</html>
However for some reason the text is being placed partly on the image as shown in the image below:
Why is the text being placed over the image?
I thought I gave the image 3 columns and the text 9 columns of the row so I don't see how they get into each other.
Give the image a class of img-responsive. It's just a case of the image being too wide.