I am writing a web application which has a design that requires an scrolling div with stacked images (see image)
I have written the following HTML
<div class="row">
<div class="col-md-12">
<div class="item-image-craousel-left"></div>
<div class="item-image-carousel">
<div style="background-image: url('http://img2.timeinc.net/people/i/2014/stylewatch/blog/140915/blake-lively-600x450.jpg')" class="main-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o1_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o2_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o3_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o4_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ncdgtvSlUc1rjtt9yo2_1280.jpg')" class="sub-image"></div>
</div>
<div class="item-image-craousel-right"></div>
</div>
</div>
And CSS:
.item-image-carousel {
width: 100%;
display: inline-block;
overflow-x: auto;
}
.item-image-craousel-left {
height: 399px;
width: 20px;
background-color: #40d1b0;
position: absolute;
text-align: center;
vertical-align: middle;
padding-top: 166px;
display: none;
}
And currently I am getting this which is not overflowing and when I increase the width the images stack inline rather than in blocks of two as in the image above
Can someone tell me how I can achieve the layout as in the first picture. I am using Bootstrap 3 for its grid.
From my comment I meant something like this...(not knowing the correct 'col-md-xx' to use)
<div class="row">
<div class="col-md-12">
<div class="item-image-craousel-left"></div>
<div class="item-image-carousel row">
<div class="col-md-8 main-image" style="background-image: url('http://img2.timeinc.net/people/i/2014/stylewatch/blog/140915/blake-lively-600x450.jpg')"></div>
<div class="col-md-4">
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o1_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o2_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o3_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o4_250.jpg')" class="sub-image"></div>
<div style="background-image: url('assets/images/tumblr_ncdgtvSlUc1rjtt9yo2_1280.jpg')" class="sub-image"></div>
</div>
</div>
<div class="item-image-craousel-right"></div>
</div>
</div>
Related
I am having issues with my .parallax CSS class that is done default by the framework it's not resizing like my main image when it comes to mobile view. It works well with a desktop view. They move more to the left the last two images is there a possibility to move them more center? I tried to center them using position: no-repeat fixed center; in CSS or using frameworks default parameters.
https://i.imgur.com/itVR3No.jpg
The image goes off to the left and does not center.
$(document).ready(function() {
$('.parallax').parallax();
});
.ha-bg-parallax {
background: url(https://i.imgur.com/YqK1Oeu.jpg) no-repeat fixed center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height: 100vh;
margin: 0 auto;
width: 100%;
display: table;
vertical-align: middle;
}
.parallax{
position: no-repeat fixed center;
max-width:100%;
}
.ha-bg-parallax .ha-parallax-body {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav class="blue darken-1">
</nav>
</div>
<div class="ha-bg-parallax text-center block-marginb-none" data-speed="20" data-type="background">
<div class="ha-parallax-body">
<div class="section scrollspy row title" id="home">
</div>
</div>
</div>
<div class="section light-blue lighten-5">
<div class="row container">
<div class="section scrollspy" id="info">
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img alt="header1" src="https://i.imgur.com/QFPutVs.jpg"></div>
</div>
<div class="section light-blue lighten-5">
<div class="section scrollspy" id="portfolio">
</div>
<!--row for parallax-->
</div>
<div class="parallax-container">
<div class="parallax"><img alt="header2" src="https://i.imgur.com/gyYRcBK.jpg"></div>
</div>
<!--Floating Action Button custumize-->
<footer class="page-footer blue darken-1">
<div class="col l4 offset-l2 s12 container center">
<div class="section scrollspy" id="links">
</div>
</div>
I am building the front end of my website in bootstrap 4. I'd like one of my pages to be split into four background images each of which fills a column so that the columns stack responsively on mobile. As of now, I have the design below where I use the background-image attribute to fill each column. The images do not fill the whole column though.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="img img-profile-1">
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-2" >
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-3" >
</div>
</div>
<div class="col-md-3 text-center">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
I added the css below to the div within each column and got the full image to show but there is a strange scrolling issue and white space when I make the viewport smaller.
.img-profile-1 {
background-image: url('../img/image.jpg') !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
margin-left: -15px;
margin-right: -15px;
}
Any ideas how to get handle this responsive vs background image dilemma?
Thanks!
You don't have to add another <div> inside the .col-md-3 in order to give it a background, instead you can just give that same <div> the class of .img-profile-1 and so on.
Bootstrap 4 also adds a cool class to where it removes all white spaces between each .col, it is called .no-gutters. You can view that on the snip below.
.img-profile-1,
.img-profile-3 {
background-image: url('http://placehold.it/500/aaaaaa/000000');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
.img-profile-2,
.img-profile-4 {
background-image: url('http://placehold.it/500/000000/ffffff');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-3 img img-profile-1">
</div>
<div class="col-md-3 img img-profile-2">
</div>
<div class="col-md-3 img img-profile-3">
</div>
<div class="col-md-3 text-center img img-profile-4">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
Instead of setting the width and height in your css for the div, try adding class img-fluid to the image tag.
Here is the fix
If you add col-md-3 or any other column in bootstap it take right padding and left padding of 15px so that inner content will no cover full width. To cover full width we need to add another div with class row below the column so that inner content will be made to cover full width
Fixed code is given below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="img img-profile-1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-2" >
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-3" >
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="row">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
</div>
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 below HTML code in which the images are purely responsive.
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg); width:100%;" border="0" alt="Null">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
</ul>
</div>
In this, the slide_1.jpg image is responsive. What I want is, I want to replace this image with my actual Image.
I tried changing the image by giving width:100% but the Image was still getting stretched. Any idea, how to make that image responsive.
Update
and the css is below
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
display: table-cell;
vertical-align: middle;
min-height: 700px;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 70px;
font-weight: 400;
color: #fff;
}
#media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 40px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
font-size: 20px;
color: #fff;
}
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(/images/slide_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
</ul>
</div>
If you change only the width to 100% it will stretch the image inside of it. Try adding height:auto; to the inline CSS in order for the image to scale correctly.
If that doesn't work, try replacing your background-image property with:
background: url(images/slide_1.jpg) no-repeat center center;
background-size: cover;
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>