Bootstrap column height larger than defined - html

I am trying to do a DIV-box with a height of 60px with bootstrap.
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
Then I assign a height to either TopRow or TopCol:
#TopRow{
height:60px;
box-sizing: border-box;
}
I expect to get a row container of 60px. The correct Value is shown for the element, however chrome shows me a height around 80px.
I did not find a ruler feature in IE 11 to check if it is a Browser issue.
Maybe you experienced anything similar?
This is the full code that is giving me the output in the picture. The ruler shows a heigt of about 80px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Top Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}</style>
</head>
<body>
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Demo (problem doesn't occur)

add max-height
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}

I finally found the cause of displaying a different height than set in css:
If you zoom your page (even in another window at another time) the developer window will remember and zoom you page to the last used value! No hint shown whatsoever....

Related

Overlapping divs using bootstrap extend past page width, unsure what the cause is

I have some divs arranged in a way so that there are two columns, and a box that overlaps between them. For reasons I can't figure out, the div extends just slightly past the page width, causing a horizontal scroll bar to appear (which is bad).
Additionally, the left most div extends below the background image of the parent div, which should not be possible.
Why are these divs not lining up neatly?
My HTML code is below. I am not using a snippet as the snippet shows the output in responsive mode which does not demonstrate the issue. I know that inline CSS is advised against, and it is only used for the purpose of this question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
<div style="height:500px;background-image:url(https://www.w3schools.com/howto/img_parallax.jpg);background-position:center;background-size:cover;">
<div class="row pb-3" style="height: 520px; position:relative;">
<div class="p-3" style="position:absolute; background:white; top:100px; height:220px; width:400px; z-index: 2;">
<h1>Text to overlap here</h1></div>
<div class="col-md-3" style="background:grey;"> </div>
<div class="col-md-9" > </div>
</div>
</div>
</body>
</html>
Just add to row with class pb-3
.pb-3{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You can also add to div with class p-3
.p-3{
max-width: 100%;
}
Avoid using "height" and use min-height /max-height instead.

How to resolve this problem? How to break the grid row, bootstrap 4? Which Bootstrap classes I have to use?

Test Links.
Using Bootstrap classes, modify the div element with the id "links" so that on extra small
resolutions (<576px), each link and ad takes one whole row. It should look like this:
On small resolutions and higher (≥576px), both links should take one half of the row and the ads
should be invisible. It should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tests</title>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a,
div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div>Ads!</div>
Programming tests
<div>More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
You are getting close with your answer. To get it to work, these are the changes you need to make to the original code in your question:
add the class row to the container that has your cols (i.e. the links div) - cols must be in a row
Add col-12 col-sm-6 to the a elements (you just had the wrong breakpoint when you said col-12 col-md-6) Ref: Bootstrap breakpoints, Bootstrap Grid Mix & Match Col classes
For the divs, add d-sm-none to hide it on small screens (Ref: Bootstrap Display property) and col-12 to show it full width on all other screens.
You can see it working here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links" class="row">
Aptitude tests
<div class="d-sm-none col-12">Ads!</div>
Programming tests
<div class="d-sm-none col-12">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/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.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
#media (min-width: 576px ) {
#links {
display: flex;
flex-direction: column;
padding-right: none;
padding-left: none;
}
}
#media (max-width: 576px ) {
#links {
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div class="d-none d-md-block">Ads!</div>
Programming tests
<div class="d-none d-md-block">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
This is the code I got with it.

Responsive Background image for every section

Hi i searched it a lot but i cannot find any solution.
Actually I want to have image for every HTML section. and it should be responsive.
here is my code
<section id="portfolio">
</section>
<section class="success">
</section>
and CSS
#portfolio {
background: url(../img/STS_247650163-Web.jpg);
background-size: cover;
height:400px;
}
.success {
background: url(../img/success.jpg);
background-size: cover;
height:1100px;
}
now if I remove height the images disappear and if add them the images becomes big and ugly.
i tried.. different method but nothing is working
thank you
You have two ways to make responsive images.
Use bootstrap- .img-responsive
use custom media queries -
#media screen and (max-width: 368px) {
img.yourclass{
min-height: 150px or auto;
}
}
Better use bootstrap for your divs or section, try this -
<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>
</body>
</html>

CSS background elements on both sides of the screen

I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo

Web page (made with twitter bootstrap) zoomed in on iphone, how to force it to fit iPhone screen?

I try to make html.page with twitter bootstrap (NOT responsive). I grab code for html footer from here Flushing footer to bottom of the page, twitter bootstrap
But I've got some problems with it:
Footer width on iPhone was less than content width. I fixed it adding min-width (see it in main2.css)
Now I've got another problem:
I've set viewport meta tag and disable bootstrap-responsive.css, but I don't understand why the entire page does not fit the screen on iPhone (it's kinda zoomed in)? How to zoom it out by default?
I can't zoom it out. iPhone zoom it in after I stop zooming. I could delete viewport meta tag, but is there any other solution?
Here is a screenshot: (It's iOs simulator but on real phone it is the same)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
<!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" /> -->
<link rel="stylesheet" type="text/css" href="assets/css/main2.css" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
<p>Your content here. Your content here. Your content here</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="offset8 span4">
This is footer text. This is footer text. This is footer text.
</div>
</div>
</div>
</footer>
</body>
</html>
main2.css:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
background: green;
width:100%;
min-width: 940px; /*<-- this fixed footer width issue*/
}
I am amazed that you said that in POINT 1, you solved your proble by using min-width Instead of min-width you should write max-width as you want to restrict it to a certain width.
Change your viewport meta tag to:
<meta name="viewport" content="width=940, initial-scale=1.0, maximum-scale=1.0">