For screens, I put padding at 0 for container-fluid but the screen still does not fill the screen that is less than or equal to width 1024.
.container-fluid {
background-color: #e2e5f4;
height: 600px;
margin-bottom: 200px;
padding: 0;
}
What works:
at 1024- width: 101%;
at 768- width: 112%;
at 320- width: 112%;
HTML code:
<div class="container-fluid p-0">
<div class="row border bg-danger p-0">
<div class="col-md-7 p-0">
<div class="MededX">
MEDedX
</div>
<div class="capture_tittle">
liunhliunh
<br> lunliu luinu liuni
<br> nllniun Nilo ahh
</div>
<div class="subCapture_tittle">
LOerm Swaminarayan swmainarayan swaminarayan swaminarayan
</div>
</div>
<div class="col-md-5 p-0 ">
<div>
<img class= "hex" src="hex.png">
</div>
<div>
<img class= "medIpad" src="medipad.png">
</div>
<div>
<img class= "plantsLeft" src="plantsLeft.png">
</div>
</div>
</div>
</div>
What's the problem? How do I fix it?
Use a custom wrapper and set its width to 100%.
.container-full {
margin: 0 auto;
width: 100%;
}
or a fast solution
style="width:100%"
Related
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
The Problem:
In a full-size app layout (100% width, 100% height) using flexbox with overflow, the scrollbars do not display for overflow-y in Firefox, IE, or Edge. They do display properly in Chrome. Rather than having a vertical scrollbar in FF/IE/Edge on the element, the scrollbar is applied to the entire page.
What I've Tried:
I've tried adding, as mentioned in several other SO answers, to add min-height: 0; to the flex elements / parents. I haven't been able to get this solution to work, but perhaps I am doing something wrong.
Screenshots:
Chrome:
Firefox:
Example:
https://codepen.io/gunn4r/pen/WEoPjN
html {
height: 100%;
}
.flex-grow {
flex: 1;
}
.canvas-wrapper {
overflow: scroll;
}
.canvas {
width: 3000px;
height: 3000px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body class="h-100">
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4">Top Bar</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-9 px-0 d-flex flex-column">
<div class="canvas-wrapper">
<div class="canvas bg-success">
Canvas
</div>
</div>
<div class="bg-danger py-3">
Canvas Footer
</div>
</div>
<div class="col-3 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
</div>
<div class="row bg-warning">
<div class="col-12 py-2">Overall Footer</div>
</div>
</div>
</body>
It looks like the problem stems from this section of your code:
.canvas-wrapper {
overflow: scroll;
}
You want this element to have scrollbars. However, the element has no defined height.
From MDN:
In order for overflow to have an effect, the block-level container
must have either a set height (height or max-height) or
white-space set to nowrap.
Chrome doesn't seem to care about the height requirement. The other browsers do.
This should be enough to make it work across browsers:
.canvas-wrapper {
overflow: scroll;
flex: 1 0 1px;
}
html {
height: 100%;
}
.flex-grow {
flex: 1;
}
.canvas-wrapper {
overflow: scroll;
flex: 1 0 1px; /* NEW */
}
.canvas {
width: 3000px;
height: 3000px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="h-100">
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4">Top Bar</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-9 px-0 d-flex flex-column">
<div class="canvas-wrapper">
<div class="canvas bg-success">
Canvas
</div>
</div>
<div class="bg-danger py-3">
Canvas Footer
</div>
</div>
<div class="col-3 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
</div>
<div class="row bg-warning">
<div class="col-12 py-2">Overall Footer</div>
</div>
</div>
</body>
When using percent for height on element, all its ascendants also need a height set, and if all will have percent, one need to set it all the way up to the html/body.
When combined with Flexbox this can get really tricky to solve, as when one need to set height: 100% on all ascendants, other unwanted render issues can cause the layout to break.
Here is one solution, which work perfect cross browser, where an extra wrapper, canvas-fix, for the canvas is added, and then with position: absolute we can make this work.
Fiddle demo
Stack snippet
html {
height: 100%;
}
.flex-grow {
flex: 1;
}
.canvas-wrapper {
flex-grow: 1; /* take all remaining space */
width: 100%; /* full width */
position: relative; /* for the absolute positioned fix */
}
.canvas-fix { /* added rule */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: scroll;
}
.canvas {
width: 3000px;
height: 3000px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body class="h-100">
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4">Top Bar</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-9 px-0 d-flex flex-column">
<div class="canvas-wrapper">
<div class="canvas-fix">
<div class="canvas bg-success">
Canvas
</div>
</div>
</div>
<div class="bg-danger py-3">
Canvas Footer
</div>
</div>
<div class="col-3 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
</div>
<div class="row bg-warning">
<div class="col-12 py-2">Overall Footer</div>
</div>
</div>
</body>
My page has 3 div(s) within a div. In tablet and desktop screens they look good (center-aligned), but on a very small device such as cellphone the inner div(s) are left aligned (I want them to be horizontally center aligned). I applied text-center, and center-block to the outer div but it does not work. Any suggestion? Here are the html, and css codes.
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
portfolio-caption {
max-width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
}
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div style="max-width: 281px">
<a href="#" ">
<img src="./x/pilotproject1.jpg " class="img-responsive " style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# ">
<img src="./x/pilotproject2.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# " class="pilot-link ">
<img src="./x/pilotproject3.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
The reason that I have is that the width of the pictures is 281 px, if I do not set the width, the width of the div that comes after the img will be bigger than 281 px which is not something that I want.
as you can see in this picture, the images are all left-aligned
I added a class centered as a container to center elements (please remove the border border: 1px solid red; it is used to show you the container block ):
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid red;
}
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
wrap each element you want to be centered.
Also in your css portfolio-caption should be .portfolio-caption to select a class.
I moved your in-line style to css class img-responsive so you can update your style in one place.
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
.portfolio-caption {
width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
float: right;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* border: 1px solid red; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="#">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# " class="pilot-link ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
You should not apply classes to outer divs, apply them exactly to what you want to be centered : class="img-responsive center-block", and
also check the bootstrap version center-block is new in Bootstrap version 3.0.1 i believe.
Use
Text align : center ;
text-align:center
<div style="max-width: 281px; text-align : center">
Plunker link :
https://plnkr.co/edit/UaW436KiylzfqOCU1cg1?p=preview
I'm trying to get some images to scale responsively in their parent container using the Bootstrap img-responsive class, but it's not going well. In this scenario, I want to display between 2 and 4 images in a grid pattern on the screen, and for the images to be responsive inside of their parent div.
The problem is that the images don't shrink with the img-container class.
https://jsfiddle.net/fcLv3750/2/
HTML
<div class="container-fluid">
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
CSS
.row-container {
background-color: red;
padding: 5px;
max-height: 50%;
height: auto;
}
.img-container {
padding: 4px;
max-height: 100%;
border: 5px;
border-color: black;
border-style: solid;
}
.col-sm-6 {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.row-inner {
background-color: orange;
height: 50vh; //I want the page contents to resize based on browser window height (no scrolling)
width: auto;
}
NOTE: The following will make the images become responsive, but it throws off the grid by making the img-container the full height of the row, which I prefer not to do. (I do not want the img-container height to be 100%)
https://jsfiddle.net/bm83ts0p/2/
.img-container {
padding: 4px;
height: 100%; //changed from max-height:100%
border: 5px;
border-color: black;
border-style: solid;
}
img{
max-height: 100%
}
A) What is causing the img-responsive class to be ignored?
B) What can I do to make the images responsive, and the img-container div not be 100% height.
EDIT: A key feature is that the content be resized to the browser window with no scrolling, hence the height: 50vh; for each of the 2 rows.
EDIT2: Here is the desired result (which only works when the images are at max-resolution with no scaling. Large images or smaller browser window produce the problems listed above)
I have deleted your wrapper "row-inner" from your code as it causes the clearfix issue. Mostly it is reason.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Columns in Boostrap grid immediately follows row. e.g row>col to avoid any kind of clearfix issue. Hope it helps.
JS Fiddle : https://jsfiddle.net/dncwdvkq/
I have a problem with some cards I've made with Bootstrap. Here's the code:
formacion {
color: white;
position: relative;
}
.formacion .puesto {
position: relative;
z-index: 1;
}
.formacion .puesto img{
margin-top: 10px;
}
.formacion .empresa {
width: 100%;
position: absolute;
top: 52px;
background: rgb(255, 255, 255);
color: #000;
z-index: 0;
}
<div class="col-md-4 col-sm-4">
<h2>Formación<br><small>Experiencias académicas destacadas</small></h2>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #8224e3">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-14.50.26-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Ingeniero en informatica</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e688ff">
<h4 class="text-center col-sm-offset-3">Universidad<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-09-2004 - 01-04-2011 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #81d742">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-15.41.22-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Curso 1</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e5ffa6">
<h4 class="text-center col-sm-offset-3">La institución<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-10-2016 - 31-10-2016 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
This code makes my divs look like this:
When they have to show like this (achieved by adding a fixed height to .capsula-formacion, but I don't want to put it because some of the divs could be longer than others):
I have always the same problem when I'm using absolute positioning so I'm assuming I'm doing it wrong. Which's the way to achieve my desired layout? Thank you in advance!!
Don't put absolute position in content div. You can manage image by position absolute.
You can set image by minus position and also you can set image width and height.
In responsive view you can manage image width and height by break point(Media query css).