Here is the plunkr:
The issue is for this div
https://plnkr.co/edit/HHsReAT6GLyNZTF4qOJj?p=preview
<div class="main-page">
<div class="container">
<div class="row">
<div class="col-xs-6 welcome-text">Ankur Chavda</div>
<div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div>
</div>
</div>
</div>
You can see the css classes in plunkr.
Thanks in advance.
Remove the line height from:
.main-page {
background-color: #293b4d;
width: 100%;
height: 90vh;
/* text-align: center; */
/* vertical-align: middle; */
}
if you really want those two div elemnts to centered be to the main-page you can try this:
.main-page{
background-color: #293b4d;
width: 100%;
height: 90vh;
/* text-align: center; */
/* vertical-align: middle; */
position:relative;
}
.holder {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And then add another div element with class named "holder" as a parent of the row like this:
<div class='holder'>
<div class="row">
<div class="col-xs-6 welcome-text">Ankur Chavda</div>
<div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div>
</div>
</div>
Hope that will work.
Here is a screenshot:
Related
I need to display each div without any overlaps, the main div is using bootstrap col-*, this same div contains other divs with absolute position, I need to be clear that I cannot altern the height and the width of any div outside .element divs (which means width, height of 100% or auto can still be used).
Here's the fiddle : https://jsfiddle.net/Lmt1u1uw/6/
.layout {
position: relative;
}
.element,
.elements {
position: absolute;
}
.layout-1 .background {
background: #4dadc9;
width: 600px;
height: 400px;
}
.layout-1 .text {
transform: translate(30px, 60px);
color: #ffffff;
width: 200px;
}
.layout-2 .background {
background: red;
width: 600px;
height: 400px;
}
.layout-2 .text {
transform: translate(170px, 200px);
color: #ffffff;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="layout layout-1">
<div class="elements">
<div class="element background"></div>
<div class="element text">Magic soak into my spine.</div>
</div>
</div>
</div>
<div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="layout layout-2">
<div class="elements">
<div class="element background"></div>
<div class="element text">The dreams maker gonna make you mad.</div>
</div>
</div>
</div>
As you can see in the snippet the two .region are on top of each other on responsive and shouldn't overlap, how can I fix this ?
The two .elements need to be display:block and have a specified width/height in order to float around each other:
have a look a my fiddle here:
https://jsfiddle.net/Lmt1u1uw/7/
This should do the trick.
How can I align div element at the bottom of parent element while using bootstrap col?
.wrapper {
background-color: green;
height: 200px;
}
.bottom {
position: relative;
}
.bottom-div {
height: 200px;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="col-md-3 bottom">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
bottom div element does not align at bottom. What is correct way of doing this? Thanks.
UPDATE: Div element runs out of wrapper (it basically moves up)
Not sure exactly what you're trying to do, as #CBroe said flexbox would be the best way but try this:-
/* CSS used here will be applied after bootstrap.css */
.wrapper{
background-color:green;
height: 200px;
position: relative;
}
.bottom-div{
height: 50px;
width: 50px;
position: absolute;
bottom:0;
left: 0;
background-color: red;
}
.testclass {
height: 100%;
}
<div class="wrapper">
<div class="col-md-3 testclass">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
A common, modern design technique for responsive websites is to use a screen-height element as the above-the-fold content wrapper, and have all other content available below. Here's a good discussion on this technique. Here's a demo at CodePen:
#fullscreen {
width: 100%;
height: 100%;
display: table;
}
#fullscreen .fullscreen-content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="fullscreen">
<div class="fullscreen-content">
...
</div>
</div>
How can I make a Bootstrap 3 row behave in this manner?
I'm facing this challenge. Here's my current solution.
.full-ht {
height: 100vh;
position: relative;
}
.full-ht-content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
margin-left: -15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row full-ht">
<div lass="col-xs-12 full-ht">
<div id="page-top-content" class="full-ht-content">
Above-the-fold content.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Other content.
</div>
</div>
</div>
Fiddle demo
I am trying to setup my layout on the mobile-first way. In the orange area here I have a link with class="logo". But for some reason the logo does not appear at all.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 bg bg-blue"></div>
</div>
<div class="row">
<div class="col-xs-12 bg bg-orange">
test
</div>
</div>
<div class="row">
<div class="col-xs-12 bg bg-white"></div>
</div>
<div class="row">
<div class="col-xs-12 bg efrat"></div>
</div>
</div>
And some relevant CSS
.bg-orange {
position: absolute;
top: 3%;
background-color: #f7942e;
height: 25%;
}
.bg-orange a.logo {
background: url(//placehold.it/480X91) no-repeat center;
text-indent: -9999px;
display: inline-block;
max-width: 100%;
}
For the full example please see: here
How can I achieve this?
Thanks
You need to show us some of YOUR's code... But for that. also you must display a as block or something similar for background:url work.
Use this
.bg-orange a.logo {
background: url("http://placehold.it/480X91") no-repeat center;
text-indent: -9999px;
display: inline-block;
width:480px;
height:91px;
margin: 0 auto;
}
What I would like to achieve (the goal)...
I'm trying to display a row of images (with the image name below the image) in html, like so:
When a user clicks on an image I want a square to appear over the image, to indicated selection like so (user has clicked on Tile1):
What I have done so far...
So far I have managed to display the tiles in a row:
Here's the html code that produced the image above:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="default_tiles_view_square" id="tile2">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
And the CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.default_tiles_view_square {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
And a fiddle showing the example above: http://jsfiddle.net/jamiefearon/t8d6U/
The strategy to achieve the goal...
I was thinking about wrapping the image and its title in a div, and then changing the background colour of the div. Here is the result and the code:
HTML:
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
#tile1 {
background-color:red;
}
The Problem..
It does not look good, and the actual image is not covered by the red colour. Maybe it would be possible to overlay a div over the wrap div, set it's opacity < 1 and change its background colour.
What do think? Does anyone have any ideas of a good way to achieve the goal?
Something like this should do the trick: http://jsfiddle.net/t8d6U/1/
So just hide the overlay DIVs initially with display:none (or e.g. left:-9999px) then show them onClick.
CSS:
#default_tiles_view {
overflow: auto;
}
.default_tiles_view_square {
float: left;
margin: 5px 10px 10px 10px;
position: relative;
height: 128px;
width: 128px;
}
.default_tiles_view_square p {
text-align: center;
}
.content {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.overlay {
position: absolute;
z-index: 2;
background: red;
opacity: 0.5;
height: 128px;
width: 128px;
top: 0;
left: 0;
}
HTML:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="overlay"></div>
</div>
<div class="default_tiles_view_square" id="tile2">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
<div class="overlay"></div>
</div>
</div>
I have taken what Gaurav said in the comments, changing the opacity:
HTML
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
#tile1:hover{
background:red;
opacity:0.4;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/
Hover over Tile1 to see the effect.