I want to make div that appears like navbar in bootstrap's.
I made two div and collocated in two ways.
First, I located divOneGray first and then divTwoBlue like,
<div class="container-fluid">
<div class="row" id="divGray">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
</div>
<div class="row" id="divBlue">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;"></div>
</div>
</div>
In this case, divBlue appears above divGray,
But Second case,
<div class="container-fluid">
<div class="row" id="divBlue">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;"></div>
</div>
<div class="row" id="divGray">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
</div>
</div>
divGray appears above divBlue.
Why this happened?
What is needed to do it like First case without collocating of html code?
EDIT:
Here is my hoping result:
https://jsfiddle.net/d6wunt0L/
In your second case, after rendering divBlue you have render divGrey which overlaps the divBlue, so to show the divBlue you need to apply z-index:1 for divBlue whereas in your first case, you are rendering blueDiv after greyDiv, so you don't find any problem here.
<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="container-fluid">
<div class="row" id="divBlue">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;z-index:1;"></div>
</div>
<div class="row" id="divGray">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
</div>
</div>
Try This:
<div class="container-fluid">
<div id="divGray">
<div class="col-lg-6" style="background-color: #cccccc; height: 4000px;"></div>
</div>
<div id="divBlue">
<div class="col-lg-6" style="background-color: #003366; height: 100px; bottom: 0px;"></div>
</div>
</div>
Related
I want to create progress bar as in below image.
I do not know how to create this. Any help would be appreciated.
Here's a way to do it with Bootstrap:
.bar-step {
position: absolute;
margin-top: -20px;
z-index: 1;
font-size: 12px;
}
.label-txt {
float: left;
}
.label-line {
float: right;
background: #000;
height: 50px;
width: 1px;
margin-left: 5px;
}
.label-percent {
float: right;
margin-left: 5px;
}
<head>
<link href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="row"><br>
<div class="col-xs-12">
<div class="progress">
<div class="bar-step" style="left: 100%">
<div class="label-txt">Level 3</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="bar-step" style="left: 33%">
<div class="label-txt">Level 1</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="bar-step" style="left: 33%">
<div class="label-txt">Testing 123</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="progress-bar progress-bar-success" style="width: 46%;"></div>
</div>
</div>
</div>
</div>
</body>
Credit goes to timgomm https://bootsnipp.com/snippets/1KnKq
NOTE: I am just guessing the percentages - you will need to edit the percentages in the inline styles to suit you.
I have an image I am trying to replicate as seen in the image. I am trying to use bootstrap to limit the CSS.
The image I am copying is this
I have being trying to wrap my head around it but can't seem to figure it out. Below is an example of the code I have so far
<div class = "container col-md-offset-2">
<div class="row">
<div class="col-md-8 ">
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
</div>
<div class="col-md-4 well"><img class = "img-responsive" src=""></div>
</div>
</div>
.banner_text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
font-size: 36px;
}
.banner_wrapper {
background: lightgreen;
height: 250px;
}
.left_wrapper_block {
height: 150px;
padding: 30px;
margin: 10px 0;
background: lightblue;
}
.right_wrapper_block {
padding: 30px;
margin: 10px 0;
background: lightyellow;
height: 310px;
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 banner_wrapper">
<p class="banner_text">Latest News</p>
</div>
</div>
<div class="row">
<div class="col-md-6 left_wrapper">
<div class="left_wrapper_block">
<p>Resources</p>
</div>
<div class="left_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
<div class="col-md-6 right_wrapper">
<div class="right_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
</div>
</div>
I am trying to figure out how to achieve the layout below with bootstrap.
Here is my code so far. I do not find a solution to put the blocks below the first cols...
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div style="height: 905px; background-color: blue;"></div>
</div>
<div class="col-sm-6">
<div style="margin-top: 200px; height: 305px; background-color: blue;"></div>
<div class="row">
<div class="col-sm-6">
<div style="margin-top: 30px; height: 370px; background-color: blue;"></div>
</div>
<div class="col-sm-6">
<div style="margin-top: 30px; height: 1000px; background-color: blue;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js">
</script></body>
The desired layout is:
In the next code you can see the layout. You have to know that the :before styles are just to show you how it see. This example isn't made thinking responsive, if you want it works on mobile and table devices, you have to edit it.
Another thing is that the sixth box is out of the container, if the screen has little with, this box won't see complete.
I give to all boxes a fixed heigh to test it see like the picture.
.container {
max-width: 80%;
}
.container .red:before,
.container .red2:before {
background-color: red;
content: "";
display: block;
margin-bottom: 15px;
}
.container .red:nth-child(1):before {
height: 200px;
}
.container .red:nth-child(2):before {
margin-top: 30px;
}
.container .red2:before,
.container .red:nth-child(2):before,
.container .red:nth-child(5):before,
.container .red:nth-child(7):before {
height: 80px;
}
.container .red:nth-child(3):before {
height: 75px;
}
.container .red:nth-child(4):before {
height: 265px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-6 red"></div>
<div class="col-xs-6 red"></div>
<div class="col-xs-3 red"></div>
<div class="col-xs-3 pull-right red"></div>
<div class="col-xs-8 col-xs-offset-1 red"></div>
<div class="col-xs-5">
<div class="red2" style="margin-left: -20%;"></div>
</div>
<div class="col-xs-4 red"></div>
</div>
I am trying to have two columns in a navigation bar in bootstrap. But when I do, and I try resizing, the right column overlaps the left. I can't understand why. I see the problem arising from viewport size 769px and persists upto 992px.
HTML
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
Try below code
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9 col-xs-12" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3 col-xs-12" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
I have added working example here
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9 col-xs-12" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3 col-xs-12" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
Alright, I eventually found the answer to my own question. I had to add the clearfix class to the first column in the row. Although it fixed my issue, still would like to know if there are any other views.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-sm-9 col-md-9" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-sm-3 col-md-3" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
You missed to use col-sm-... for small devices
I want to draw a backround colour that fills an entire Bootstrap column and row. Currently the coloured area (element with id of html_overlay below) exactly matches the specified text width, not column width. Any ideas?
html:
<div class="container">
<div class="row">
<div class="col-sm-2 col-lg-1">.col-sm-2
<a class="btn btn-primary pull-left" id="br_button" href="do_something">Button</a>
</div>
<div class="col-sm-10 col-lg-11">outer .col-sm-10
<div class="col-sm-12 col-md-11">inner .col-sm-10
<div id='html_overlay'>
<div id="heading_area">
<h3>This entire column should have the background colour</h3>
</div>
<div class="wrapper" id="my_title"></div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-3">
<div class="wrapper" id="l_space_area"></div>
</div>
<div class="col-xs-8 col-sm-8 col-md-7">
<div class="wrapper" id="text_area">
<h1 id="my_text"></h1>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-3">
<div class="wrapper" id="r_space_area"></div>
</div>
</div>
</div>
<!-- overlay -->
</div>
<div class="col-sm-0 col-md-1">inner .col-sm-2</div>
</div>
<!-- outer second column -->
</div>
</div>
<!-- container -->
css:
body {
font-family: sans-serif;
background-color: #B3E5FC;
font-size: 100%
}
#container {
position: relative
}
#html_overlay {
position: absolute;
top: 0;
z-index: 100;
background-color: rgba(246, 250, 251, 0.9);
border: 1px solid;
border-color: rgba(0, 0, 0, 0.5);
}
#text_area {
z-index: 10;
bottom: 0;
}
Add left:0 and right:0 in class #html_overlay