I have a scroll overflow into a hidden one
Fiddle here
The problem is that the page won't scroll so I can see the rest of content, notice that i want the sidebar and the top bar to stay fixed in their place, only the body with the gray color to scroll
html,body{
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
}
/////////////////////////////////////////
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background- color: #e5e2e6; color:#000000; padding-top: 20px; overflow:scroll;">
test1<br/><br/><br/><br/><br/>
test2<br/><br/><br/><br/><br/>
test3<br/><br/><br/><br/><br/>
test4<br/><br/><br/><br/><br/>
test5<br/><br/><br/><br/><br/>
test6<br/><br/><br/><br/><br/>
</div>
Is it what you want ?
See this fiddle
Remove overflow: hidden; from html, body and then update HTML code like this :
HTML code updated :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body style="background-color: #e5e2e6;" >
<div class="container-fluid" style="height:100%;">
<div class="row" style="height:100%;" align="center">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar" style="height:100%; position: fixed; z-index: 10;">
<p class="title" style="text-align:center; color:#FFFFFF; font-size:2.6vw;">TITLE</p>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background-color: #3a3633; color:white; z-index: 10; margin-left: 25%; position: fixed; ">
<span class="label label-default pull-left" style="font-size:15px; margin:1%;">TEST</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: #e5e2e6; color:#000000; padding-top: 30px; padding-left: 25%; ">
test1<br/><br/><br/><br/><br/>
test2<br/><br/><br/><br/><br/>
test3<br/><br/><br/><br/><br/>
test4<br/><br/><br/><br/><br/>
test5<br/><br/><br/><br/><br/>
test6<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
</div>
I've added position: fixed; to elements you wanted fixed and add some padding to show content properly
I've changed the grey content :
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: #e5e2e6; color:#000000; padding-top: 30px; padding-left: 25%; ">
padding-left: 25%; because of the width of the left bar
padding-top: 30px; because of the height of the top bar
The top bar :
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background-color: #3a3633; color:white; z-index: 10; margin-left: 25%; position: fixed; ">
margin-left: 25%; is the width of the left bar
The left sidebar :
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar" style="height:100%; position: fixed; z-index: 10;">
The z-index with position: fixed; is used to put on first plan the two fixed bars
FYI
Its not needed to include all of the col-xs col-sm col-md and col-lg if you are going to use same size for the column. e.g. including only col-xs-3 will work for all col-xs-3 col-sm-3 col-md-3 and col-lg-3. And col-sm-9 will work for col-xs-9 col-sm-9 col-md-9 and col-lg-9
You could try using bootstraps built in tools to handle this type of thing. Use class navbar-fixed-top for your top bar, and sidebar-nav for your sidepanel.
Related
I'm working with bootstrap 4 and following codes,
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<div class="card-header rounded-0 border border-dark">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8 ">
<p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
</div>
</div>
</div>
I need display above two div elements in the same row on large screen and need separate two rows (image is above and paragraph is under the image) when it is displaying mobile device. I use following col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 item codes in side to the div but not success.
how could I manage this problem?
View in Full Page , You will get it
body {
padding-top: 40px;
}
.col-sm-6 {
background: #ccc;
}
.other {
background: #a4a4a4;
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Bootstrap Grid Demo</h1>
</div>
<div class="col-sm-6 other">
<h1>2 Columns</h1>
</div>
</div>
</div>
<p class="p">Demo by Jabir Sayed. See article.</p>
I am doing a simple page with a bootstrap grid and I am having some problems with placing the middle row occupying the full height in the middle.
These are the 3 rows: page
I want to place the row with the logo in the middle, but I am having problems with it. I placed height: 100%;, height: auto;. I even placed the container height to 100% and auto and nothing works!
I think there is a concept about bootstrap heigh that I am missing, because its the heigh that I have problems
html:
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-2">
<img id="menuIcon" (click)="toggleRightSidenav()" onmouseover="this.src='../../../assets/Images/generic/menuIcon_hover.png'" src="/assets/Images/generic/menuIcon.png" onmouseout="this.src='/assets/Images/generic/menuIcon.png'">
</div>
<div class="col-md-10 col-8">
</div>
<div class="col-md-1 col-2">
<img id="helpIcon" routerLink="/guide" onmouseover="this.src='../../../assets/Images/home/helpIconHover.png'" src="/assets/Images/home/helpIcon.png" onmouseout="this.src='/assets/Images/home/helpIcon.png'">
</div>
</div>
<div class="row row align-items-center mh-100" >
<div class= "col-md-12">
<img id="logo" src="/assets/Images/home/Logo.png">
</div>
</div>
<div class="row align-items-center justify-content-around fixed-bottom">
<div class="col-md-2 col-sm-2">
<img id="addButton" routerLink="/addPlayer" onmouseover="this.src='../../../assets/Images/generic/addIcon_hover.png'" src="../../../assets/Images/generic/addIcon.png" onmouseout="this.src='/assets/Images/generic/addIcon.png'" />
</div>
<div class="col-md-2 col-sm-2">
<p>Players Waiting: {{playerWaiting}} </p>
</div>
<div class="col-md-2 col-sm-2">
<p>Listed Players: {{playersListed}}</p>
</div>
<div class="col-md-2 col-sm-2">
<img id="searchButton" routerLink="/search" onmouseover="this.src='../../../assets/Images/generic/searchIcon_hover.png'" src="../../../assets/Images/generic/searchIcon.png" onmouseout="this.src='/assets/Images/generic/searchIcon.png'" />
</div>
</div>
</div>
css:
div{
border: yellow 1px solid;
}
#menuIcon{
width: 100%;
height: auto;
}
#helpIcon{
width: 100%;
height: auto;
}
#addButton{
width: 100%;
height: auto;
max-width: 127px;
}
#searchButton{
width: 100%;
height: auto;
max-width: 127px;
}
https://www.codeply.com/p/Xd0xi5hFNc
Couple of things.
To be able to fill several rows, you'd need a height for the container div.
Current HTML
<div class="container-fluid">
Update as
<div class="container-fluid d-flex vh-100 flex-column">
Now you can easily make your middle div fill the remaining gap by adding a fill-height class.
Current HTML
<div class="row row align-items-center mh-100" >
Update as
<div class="row row align-items-center fill-height">
Add this to your css
.fill-height {
flex: 1;
}
.fixed-bottom {
position: sticky;
}
jsFiddle
Here is my code: image is not centering top and bottom , i tried all google methods.
i have added img-fluid and img-thumbnail both also used my-auto . normal margin like margin: 10% working only auto is not working.
<div class="intro">
<div class="row">
<div class="col-10 col-md-12 col-lg-6">
<img class=" img-fluid " src="./img/l-intro-img.jpg" alt="l-intro-img"/>
</div>
<div class="col-12 col-md-12 col-lg-6">
<h1>Random text</h1>
</div>
</div>
</div>
.intro {
width: 100%;
height: 100vh;
overflow: hidden;
background-image: url(../img/bg-intro.svg);
background-position: center;
background-size: auto;
}
.img-fluid {
display: block;
margin: auto 0px;
}
Solution to your problem:
.intro {
width: 100%;
height: 100vh;
overflow: hidden;
background-image: url(https://source.unsplash.com/random/560x560);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img-fluid {
display: block;
margin: auto 0px;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="intro">
<div class="row">
<div class="col-md-12 col-lg-6 d-flex justify-content-center align-items-centerr">
<img class=" img-fluid" src="https://via.placeholder.com/150x154" alt="l-intro-img" />
</div>
<div class="col-md-12 col-lg-6 text-center">
<h1 class="text-white">Random text</h1>
</div>
</div>
</div>
</body>
You may want to find this in jsfiddle
you are using image in Background, so your have to be more specific with the div size and image size you are using, for avoiding this problem use these two properties
1* background-position-x:50%;
2* background-positon-y:50%;
Use background-size: contain; to align center.
.intro {
width: 100%;
height: 100%;
overflow: hidden;
background-image: url(../img/bg-intro.svg);
background-position: center;
background-size: contain;
}
Please include mx-auto text-center class to div above the image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="intro">
<div class="row">
<div class="col-10 col-md-12 col-lg-6 mx-auto text-center">
<img class="img-fluid " src="https://i.stack.imgur.com/quhig.png" alt="l-intro-img"/>
</div>
<div class="col-12 col-md-12 col-lg-6 text-center">
<h1>Random text</h1>
</div>
</div>
</div>
I would like to align both an image and a div (horizontally and vertically centerd) inside parent div, but I can not, I have been trying to do it for 2 days. I am using bootstrap 4, HTML5, CSS3
Images somehow do not show in the code snippet
<!-- Welcome Area -->
<div class="container-fluid p-0">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="background-image: url(assets/images/main-img.jpg);">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center">
<img src="assets/images/auscene-icon-buttons-12-t.png" class="img-responsive img-fluid" id="welcome-area-img" style="visibility: hidden;" />
</div>
</div>
</div>
</div>
<!-- End Welcome Area -->
<!-- Main area -->
<div class="container-fluid">
<div class="row pt-4 pb-4 mb-5 px-0">
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-news-title">
<img src="assets/images/auscene_icon_button_01_Y9u_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-1">
</div>
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-how-to-title">
<img src="assets/images/auscene_icon_button_02_xYm_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-2">
</div>
<div class="col-sm-4 col-md-8 col-md-push-8 col-lg-8 col-xl-8 px-0" style="width: 60% !important;">
<h1 class="text-left" style="font-size:3.5rem; color:#5acfc2; font-family:LouisGeorgeCafe;" id="welcome-area-title">Issue #01
</h1>
<h1 class="text-left" style="font-size:2rem; font-family:LouisGeorgeCafe;" id="welcome-area-subtitle"></h1>
</div>
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-guide-to-aucians-title">
<img src="assets/images/auscene_icon_button_03_ClJ_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-3">
</div>
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-in-depth-title">
<img src="assets/images/auscene_icon_button_04_JP2_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-4">
</div>
</div>
</div>
<!-- End of Main area -->
Updated After solving the problem of not being able to align an image dead center overlaps the another, now the div takes automatically height of 20px instead of div background image's height
Below you find the desired effect by use of latest Bootstrap and additional styling. Please note that this also rectifies the inconsistencies you have in your code example with the proper headers, image links and bootstrap classes.
I have placed styling inline but you can move these to a separate file if you want.
The container is set to 100% of the view height in order to center the large image (the containing row) vertically.
The smaller image is vertically aligned by the calc function where we place the image 50% minus half the image height absolutely from the top (you'll have to take this into consideration if you add the #media ref below).
Please note that both images are responsive but since the smaller image maintains its original size for longer before resizing it looks like it's bigger than the background image on smaller devices.
You can alter this with the #media rule or with more advanced CSS but that's outside of the scope of your question.
(Consider using a background image instead as Ng-Sek-Long suggests)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Centered images</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<!-- Welcome area -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<div class="row">
<div class="col-xs-12" style="position: relative;">
<img src="https://www.gruberreisen.at/fileadmin/redakteure/Website/slider/Header_Startseite1.jpg" class="img-fluid" />
<div style="position: absolute; left: 0; top: calc(50% - 132px); width: 100%; text-align: center;">
<img src="http://placehold.it/269x265/ccc.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</body>
</html>
See the code snippet below for an example:
.container {
position: relative;
display: inline-block;
vertical-align: middle;
width: 350px;
height: 250px;
}
.img-responsive {
box-sizing: border-box;
width: 350px;
height: 250px;
border-radius: #field-border-radius;
}
.overlay {
position: absolute;
top: 25%;
left: 25%;
}
.icon {
width: 175px;
height: 125px;
object-fit: fill;
}
<!-- Welcome Area -->
<div class="container-fluid p-0">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" class="img-responsive img-fluid" />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center overlay">
<img src="https://via.placeholder.com/175x125" class="img-responsive img-fluid icon" />
</div>
</div>
</div>
</div>
<!-- End Welcome Area -->
If you are looking for to align the both div and img to center you can add text-center to the parent element as well as to align left add text-left and for right text-right. But since you are having bootstrap col in your div it will have the padding when you set right or left. You need to write padding-left:0 or padding-right:0 according to the alignment.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Welcome Area -->
<div class="container-fluid p-0">
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center">
<img src="https://source.unsplash.com/300x300" class="img-responsive img-fluid" />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<img src="https://source.unsplash.com/300x300?x" class="img-responsive img-fluid" style="z-index: auto;" />
</div>
</div>
</div>
</div>
If you are looking for them to keep in both side next to one , you need to change your HTML DOM like this.
col-**-12 which means takes the width:100%. If you want your child next to one your to give each child a 50% of the width. So you need to change it it col-**-6 which gives the 50% of width.According to the logic now your parent is row and it has 2 div elements which are childs and having col-**-6 for both. And inside they have the img. If you feel the padding is unnecessary to you, so you can add padding: 0 !important; margin: 0 !important; to the element who have the class col-**
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Welcome Area -->
<div class="container-fluid p-0">
<div class="row">
<div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 parent">
<img src="https://source.unsplash.com/300x300" class="img-responsive img-fluid" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
<img src="https://source.unsplash.com/300x300?x" class="img-responsive img-fluid" style="z-index: auto;" />
</div>
</div>
</div>
In order to keep your img inside the larger one you need to set the element to position:absolute which make your element to non identifiable by html. Now you can position it as you wanted.
.parent {
position: relative;
}
.parent>img {
height: 530px;
width: 1820px;
object-fit: cover;
}
.inner-child {
position: absolute !important;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.inner-child>img {
height: 269px;
width: 259px;
box-shadow: 0 0 5px 3px black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Welcome Area -->
<div class="container-fluid p-0">
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 parent">
<img src="https://source.unsplash.com/300x300" class="img-responsive img-fluid" />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 inner-child">
<img src="https://source.unsplash.com/300x300?x" class="img-responsive img-fluid" style="z-index: auto;" />
</div>
</div>
</div>
</div>
From your comment:
Image 1 in parent div will be 1820px X 530px (or more in width) image 2 - inside inner div- is 269px X 259px,
Seems like this is what you want, a simple css will be much better than trying to use bootstrap to do the job.
.outter-div {
width: 1820px;
height: 530px;
background-image: url("https://source.unsplash.com/collection/190727/1820x530");
}
.inner-img {
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="outter-div">
<img class="inner-img" src="https://source.unsplash.com/collection/190727/269x259">
</div>
You only need to use:
.v-center {
top:50%;
left:0;
right:0;
transform: translateY(-50%);
}
The rest of the positioning can be done with Bootstrap classes.
<div class="container-fluid">
<div class="row no-gutters mvh-100 align-items-center">
<div class="col-12">
<img src="http://placehold.it/1860x530" class="img-fluid">
<div class="text-center position-absolute v-center">
<img src="http://placehold.it/269x265/444" class="img-fluid" style="z-index: auto;">
</div>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/umBZgxLzEN
Note: Make sure you follow the Bootstrap docs. The -xs infix no longer exist, and there shouldn't be col directly in other col.
OK Im using bootstrap and i have main content and inside main content i have left and right side. On left side its content and on right side i have 8 boxes. I tried everything but i cant get equal left and right side.
.main-content{
float: left;
width: 100%;
position: relative;
}
.main-content .right-box.col-md-4{
width: 37.5%;
padding-left:0;
padding-right:0;
float:right;
position:absolute;
top:0;
bottom:0;
right: 0;
}
.main-content .left-box.col-md-8{
width:62.5%;
padding-left:0;
padding-right: 0;
background-color: #fff;
float: left;
position: relative;
}
FIDDLE: https://jsfiddle.net/rvqg3fd7/
and last div on right side need to be same height like div on left side..
I tried this but without succes.
Height is an element you shouldn't force in a Bootstrap powered website, simply because Bootstrap relies on it's vertical flexibility to respond to smaller devices. After all, this is the main purpose why anyone would use Bootstrap. Yet, if you do insist, then you must give each element a definite height and control such height with paddings.
You didn't provide a code we could use (not even the fiddle) so I'll post my demo so you can see the bootstrap classes architecture you need to achieve this;
Here is the HTML
<div class="container">
<div class="row main-content">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="box left">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="box right">
<div class=" innerbox col-xs-12">
1
</div>
<div class=" innerbox col-xs-12">
2
</div>
<div class=" innerbox col-xs-12">
3
</div>
<div class=" innerbox col-xs-12">
4
</div>
<div class=" innerbox col-xs-12">
5
</div>
<div class=" innerbox col-xs-12">
6
</div>
<div class=" innerbox col-xs-12">
7
</div>
<div class=" innerbox col-xs-12">
8
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS
.box.left{
background:red;
text-align:center;
color: white;
height:350px;
}
.box.right{
background:blue;
text-align:center;
color: white;
height:350px;
padding:10px
}
.innerbox{
background:lightgray;
text-align:center;
color: black;
height:30px;
margin-top:10px;
}
.main-content{
float: left;
width: 100%;
position: relative;
}
And the link to the DEMO