How to add image between two divs like this "movie me" in this link in my code code pen?
<div class="row-fluid">
<div class="col-sm-6 col-xs-6" style="background-color: red;height: 100%">
<hello>
</div>
<div class="col-sm-6 col-xs-6" style="background-color: blue;height: 100%">
<hello>
</div>
</div>
Using flexbox (not sure if this breaks bootstrap behavior but i think it doesn't):
HTML:
<div class="row-fluid">
<div class="col-sm-6 col-xs-6" style="background-color: red;height: 100%">
<hello>
</div>
<!--Example div could be an image-->
<div class="image"></div>
<div class="col-sm-6 col-xs-6" style="background-color: blue;height: 100%">
<hello>
</div>
CSS :
.row-fluid {
height: 100%;
display : flex;
align-items : center;
justify-content :center;
}
.image {
/*Relevant part for image div*/
position : absolute;
z-index: 100;
/*Less relevant part for image div*/
width : 50px;
height : 50px;
background-color:green;
}
code pen
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
I'm trying to get this result with boostrap :
The idea would be that : the black square stay as a square, even with the right "rows" being resized (on mobile for example)
And the red rows would be having the same height/width (I failed that on the image, just a quick paint mockup)
I'd love to show you some code that would be a starting point but after a few hours I'm unable to achieve this effect...
I found that template that use this kind of structure :
Gridus
Using flexbox as a wrapper.
* {
box-sizing: border-box;
}
.flexbox {
display: flex;
justify-content: left;
align-items: flex-start;
}
.col-md-10 {
border: thin solid darkgray;
max-height: 50px;
overflow: hidden;
height: 50px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row nopadding flexbox">
<a href="#">
<div class="col-md-4 vc-photo photo-01"><img src="http://placehold.it/150" /></div>
</a>
<div class="col-md-8 nopadding">
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
</div>
</div>
You mean something like this? I didn't bother with the borders, but I can put it if you like
.left-div {
background-color: pink;
height: 120px;
width: 120px;
float:left;
}
.right-div {
background-color: red;
height: 120px;
float:left;
}
.col-xs-12{
height: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="left-div">Column 1</div>
<div class="right-div">
<div class="row">
<div class="col-xs-12">Row 1</div>
<div class="col-xs-12">Row 2</div>
<div class="col-xs-12">Row 3</div>
</div>
</div>
</div>
</div>
I have this below HTML Code:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
I tried this and lot more but couldn't align it to center.
apply style text-align:center to div as:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto;text-align:center">
<img src="~/images/loader.gif"/>
</div>
</div>
</div>
Add only this css to #loadme{text-align:center;}
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; text-align:center">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
Do This ..
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" class="text-center" style="display:block; margin: 0 auto !important;">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
The DIV containing your IMG should be a display: block;
The image should be a display: inline-block; or its initial state;
By default images or any display: inline-block; objects are much treated like text, so you'll have to assign text-align: center; to your DIV;
Hope this helps you in future.
In css,
#loadme { display:grid; align-items:center;}
Using CSSGrid
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).
I have a scenario where I need to center 3 divs of col3 in a row. When calculating, the answer shows 1.5, but what is the proper way of overcoming this challenge?
<div class="row">
<div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">
</div>
<div class="col-md-3" style="height: 50px; background-color: green">
</div>
<div class="col-md-3" style="height: 50px; background-color: orange">
</div>
</div>
Here is a fiddle: https://jsfiddle.net/DTcHh/25558/
col-md-offset-2 is messing this up because it leaves col-1 for the other end. If there was col-md-offset-1.5 that would be brilliant but apparently no :(
I tried adding paddings and margins and it started becoming very messy, and thought I am directing to the wrong way.
What is the proper way of center the 3 divs without any hacky way?
I've come to a solution by erasing the offset class from the first inner div, assigning that particular .row container an additional class (.x in my example) and adding the following CSS for that class:
.x {
width: 100%;
margin: 0 12.5%;
}
Here is a codepen with the complete code: http://codepen.io/anon/pen/bwRZyJ
Try removing offset, and changing 3 for 4.
<div class="row">
<div class="col-xs-4" style="height: 50px; background-color: red">
</div>
<div class="col-xs-4" style="height: 50px; background-color: green">
</div>
<div class="col-xs-4" style="height: 50px; background-color: orange">
</div>
</div>
This puts 3 divs in a row, taking 33% of screen each one
UPDATE:
<div class="container">
<div class="row col-xs-10 col-xs-offset-1">
<div class="col-xs-3" style="height: 50px; background-color: red">
</div>
<div class="col-xs-3" style="height: 50px; background-color: green">
</div>
<div class="col-xs-3" style="height: 50px; background-color: orange">
</div>
</div><!--row-->
</div><!--container-->