Fixed sidebar causing trouble to bootstrap responsive design - html

I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!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.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.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.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.


I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!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.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.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.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.

Related

make the two parallels lines vertically at the center of an content from left and right

I am facing one issue, maybe not a big one but I am not able to figure out how can I do
I want the double line in between the content of a div left (Subtotal) and right ($200).
Can anyone help me with this?
I have tried but I am not able to make it vertically middle.
Attaching screenshot of how I want it to look:
enter image description here
CODE SNIPPET I AHVE TRIED:
.row{
display: flex;
}
.dividerLine{
display: table-cell;
vertical-align: middle;
text-align: right;
border: 2px solid red;
height: 7px;
}
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
</div>
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
product total and I want to make the double line in between them
Attaching the screenshot how it looks:

You can achieve this by giving .row the align-items: center; property and removing margin from the p tags inside .start-lines.

You can use CSS flex align center option for this.
.row {
display: flex;
align-items: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.dividerLine {
border-top: 2px solid red;
border-bottom: 2px solid red;
height: 7px;
background-color: lavenderblush;
}
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-6">
<div class="dividerLine"></div>
</div>
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>

That looks like a giant equals sign, so let's make it a giant equals sign. That way we can be sure that it will align with the other characters vertically correctly without us having to do any other vertical positioning.
The way this can be done is to put an = character in the central column at the standard font-size but scale in the x direction. We put a huge scale in just so it will cover the whole central column whatever the width. Of course this isn't seen as overflow is set to hidden.
<!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.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p.wide-font {
transform: scale(10000, 1);
color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="text-align: right;">
<p style="text-align: right;">SUBTOTAL</p>
</div>
<div class="col-sm-4" style="overflow: hidden;">
<p class="wide-font">=</p>
</div>
<div class="col-3">
<p style="text-align: left;">SUBTOTAL</p>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4 aligning <a> tag in absolute center of div

I'm totally new to Bootstrap.
I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div.
I've tried to use .mx-auto, margin: 0 auto and other usual methods I know of. I'm running out of otions here.
Can anyone advise me on this.
here is a fiddle for my code
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
}
.brand-text{
font-size: 2em;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>

As per my understanding,you want to align a tag to vertical and horizontal center inside <div class="banner-logo"></div>. For this you can use bootstrap 4 classes mx-auto and my-auto for the <div> that wraps <a> tag
.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>

There are multiple ways for vertical alignment.
You can do by giving position absolute, make the parent div position relative.
Here is the Code:-
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
position:relative;
}
.banner-logo a
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.brand-text{
font-size: 2em;
color: white;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

You can skip mx-auto and my-auto for that fix, text-center and padding will do the work for you. Check this solution, it's simple. Hope it'd help
.banner-logo{
background-color: red;
padding: 10px 0;
}
a.brand-text{
text-decoration: none;
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
Webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
</body>
</html>

Css moving the divs in left and right

I have the "left ads" div and a "right ads" div and the main content and menu at the center. I want to move the "left ads" div in left so that so that the "menu bar" and all the content below it gets at top. And i want to move the "right ads" div in right . Also after moving them they should be independent i.e what ever be their content they should not effect the middle div i.e main content div .[Please view it in desktop in full screen]
*{
margin: 0;
padding: 0;
}
#adleft{
background: pink;
}
#wrapper{
max-width: 1024px;
margin: 0 auto;
}
#topmenubar{
background:violet;
}
#logoandad{
background:greenyellow;
}
#main_content{
background: azure;
border: 1px solid black;
}
#featuredcontent{
background: burlywood;
}
#morecontents{
background: crimson;
}
#allquizes{
background: chocolate;
}
#adright{
background: aqua;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/quiz.css">
<title>QuizOm</title>
</head>
<body>
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
<div id="featuredcontent">
<div class="twoupperbox">Featured content 1</div>
<div class="twoupperbox">Featured content 2</div>
</div>
<div id="morecontents">
<div class="bottomthreebox">conten1</div>
<div class="bottomthreebox">conten2</div>
<div class="bottomthreebox">conten3</div>
</div>
<div id="allquizes">
<h1>All Quizes</h1>
<div class="bottomthreebox">All quiz1</div>
<div class="bottomthreebox">All quiz2</div>
<div class="bottomthreebox">All quiz3</div>
</div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</body>
</html>

The easiest way to achieve this would be using display:flex
#adleft{
background: pink;
}
#wrapper{
max-width: 1024px;
margin: 0 auto;
flex:1 0 auto;
}
#topmenubar{
background:violet;
}
#logoandad{
background:greenyellow;
}
#main_content{
background: azure;
border: 1px solid black;
}
#featuredcontent{
background: burlywood;
}
#morecontents{
background: crimson;
}
#allquizes{
background: chocolate;
}
#adright{
background: aqua;
}
.container{
display: flex;
flex-direction: row;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style/quiz.css">
<title>QuizOm</title>
</head>
<body>
<div class="container">
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
<div id="featuredcontent">
<div class="twoupperbox">Featured content 1</div>
<div class="twoupperbox">Featured content 2</div>
</div>
<div id="morecontents">
<div class="bottomthreebox">conten1</div>
<div class="bottomthreebox">conten2</div>
<div class="bottomthreebox">conten3</div>
</div>
<div id="allquizes">
<h1>All Quizes</h1>
<div class="bottomthreebox">All quiz1</div>
<div class="bottomthreebox">All quiz2</div>
<div class="bottomthreebox">All quiz3</div>
</div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</div>
</body>
</html>

How do I make an image appear on desktops and tablets, but not on phones, using bootstrap?

I am working on a small project of mine.
It's a website for booking tours.
I'm still in the early stages, but this is what it looks like:
homepage
As you can see, each tour has his own "div" divided in 3 columns: A preview image, a short description and a button to book the tour.
I can easily add an image as a background, but if I shrink the page to a size like that from a mobile, a second div appears above the first one with the image in it, like this:
homepage mobile size
I have no idea why this occurs. Do any of you have any idea how to make the div for the image disappear on mobile or how to solve this problem?
HTML and CSS code is provided below, I am using bootstrap.
PS: Ignore the white-space around the button.
body {
margin: 0px;
padding: 0px;
}
.jumbotron {
border-radius: 0px;
margin-bottom: 0px;
}
.options {
margin-top: 30px;
}
.tours {
padding: 0px;
margin-bottom: 25px;
border-radius: 5px;
border: 1px solid grey;
max-width: 100%;
height: 20vh;
}
.preview-img {
height: 100%;
}
.short-descr {
padding-top: 2vh;
height: 100%;
background-color: red;
}
.more-info {
height: 100%;
padding: 0px;
}
.infobtn {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/homepage-style.css">
</head>
<body>
<!--Jumbotron, header for the website-->
<div class="jumbotron text-center">
<div class="container">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
<!--These are the columns in which the tours are displayed-->
<div class="container options">
<div class="col-xs-12 tours">
<div class="col-sm-3 preview-img">
</div>
<div class="col-xs-9 col-sm-7 short-descr">
<h4 class="text-left">Column 1</h4>
<p class="text-left">Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="col-xs-3 col-sm-2 more-info">
<button type="button" class="btn btn-info infobtn" href="#">More</button>
</div>
</div>
<div class="col-xs-12 tours">
</div>
<div class="col-xs-12 tours">
</div>
</div>
</body>
</html>

Add hidden-xs class to your preview-img div
http://getbootstrap.com/css/#responsive-utilities

Twitter Boostrap 3 page is not responsive

I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}

Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at

You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>