Page layout using Bootstrap - html

Is it possible to get this page layout using Bootstrap 3?
Header is fluid.
Navigation is 250px wide and 100% in height. Content takes up the rest.
When it comes to content, Bootstrap is brilliant. But I struggle to get the desired result when it comes to dividing the page the way I want.
Could go for Flexbox as mentioned here Bootstrap 100% height with navbar, but I need support for IE10.
Can this be done entirely in Bootstrap with minor adjustments or do I have to go with a separate file for the layout?

Try the below code
<!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.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-xs-12 col-sm-12 col-lg-12" style="background-color:grey; text-align:center;">Header</div>
</div>
<div class="row" >
<div style="background-color:lightcyan; text-align:center;" class="col-xs-4 col-sm-4 col-lg-4">Navigation</div>
<div style="background-color:lightgrey; text-align:center;" class="col-xs-8 col-sm-8 col-lg-8">Content</div>
</div>
</body>
</html>

you can use bootstrap but with custom css file. example here

This could be a CSS file linked to your bootstrap design. It will be quite easier to update, and you will have a clear separation between global layout design and content design.
html, body {
margin : 0px;
width : 100%;
height : 100vh;
}
body .header {
width : 100%
height : 10vh;
background-color : #aaa;
}
body .flex-line {
display : flex;
}
body .nav {
width : 250px;
height : 100%;
background-color : #ccc;
}
body .content {
width : 100%;
height : 100%;
background-color : #eee;
}
p {
text-align : center;
font-family : Arial;
}
<html>
<body>
<div class="header">
<p>Header</p>
</div>
<div class="flex-line">
<div class="nav">
<p>Navigation</p>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</body>
</html>
I hope it will be helpfull.

Related

Bootstrap 5 unused space

Good day
I have a question;
I am using Bootstrap 5 for my website, which works fine yet,
I want Bootstrap using the whole page and not like 80%; (See image)
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
And my css;
body {
background-image: url(https://i.imgur.com/M8Jq9IE.jpg);
background-size: cover;}
.title {
color: whitesmoke;}
.navbar {
background-size: cover;
background-color: gray;}
So how can I make it so Bootstrap uses the whole page and not have those wierd border/margins?
Thanks
Bootstrap's default .container class has a fixed width that changes depending on the breakpoint.
If you want the container to be full width at all breakpoints, you need to use .container-fluid.
If you want to have the full width of the container depending on the breakpoint, you need to use one of the Responsive Container classes like container-sm or container-lg.
In your case, it would be:
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
Check out the documentation for more information:
https://getbootstrap.com/docs/5.0/layout/containers/

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.

.gif file will not fit in bootstrap container

I am using the Bootstrap grid system to organise objects because I need to ensure the site is mobile-friendly. All objects adjust well to the resolution of the screen except for 1 gif.
On full resolution screen, the gif is 500x500 pixels and is perfectly sized to fit with the rest of the screen. However, on mobile (all devices), it remains 500x500, even when this makes it larger than the screen. Interestingly, on iPad pro (not other iPad) it assumes a width of 102.4 pixels, retaining height of 500.
All other items adjust perfectly and stay inside the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<link
href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html {
max-height: 100%;
max-width: 100%;
}
.logo {
color: #000000;
box-sizing: border-box;
object-fit: cover;
max-width: 10vw;
overflow: hidden;
}
#media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
max-width: 700px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 name">
<p>text</p>
</div>
<div class="col-sm-5 logo">
<img src="./cubegif.gif" class="image.fluid" alt="logo">
</div>
</div>
</div>
</body>
</html>
I am considering if the predefined size of the .gif is overriding whatever I am doing, but that does not explain the change on ipad pro.
I managed to find an answer! Posted below n case anyone else finds this thread and has the same problem:
in the HTML img tag, I gave it the following class:
<img class="fixed-ratio-resize" src="./cubegif.gif" alt="logo">
and added the following CSS:
`.fixed-ratio-resize {
max-width: 100%;
height: auto;
width: auto\9;
}`
I found this solution on http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design
Many thanks for all contributions!
Some quotation marks were missing in your code?
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-7 title">
<p>text text text text</p>
</div>
<div class="col-xs-5 logo">
</div>
</div>
</div>
</body>

Bootstrap 4 making grids take up 100% height of the rest of the page

I'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:
EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 100%;
}
#main {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<h1>Welcome</h1>
<div class="container-fluid" id="main">
<h1>This is a heading</h1>
<div class="row">
<div class="col-sm-3 div1">Left side</div>
<div class="col-sm-6 div2">Middle</div>
<div class="col-sm-3 div3">Right side</div>
</div>
</div>
</body>
</html>
Try this
.row {
height: 100vh;
}
More information here:
https://stackoverflow.com/a/16837667/7361767

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>