Here is my homepage
I want to extend the height of my image to fit the whole screen. I know that I have to adjust the height attribute, I did that, and nothing seems to work.
CSS
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url('../img/hero-slider/boxfill2sm.jpg');
background-size: cover;
position: relative;
padding-top: 0;
height: auto;
}
Note: I tried height: auto;. It doesn't do anything.
HTML
<section class="hero">
<div class="container-fluid no-margin no-padding">
<div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
<div>
<div class="row">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
<div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp fadeInDown">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.ED</h2>
<p>EFFECTIVE DIGITAL LEARNING</p>
<p>Tutti.ed is our educational software platform that empowers education companies to bring state-of-the-art digital learning products to market quickly.</p>
<a class="btn btn-primary" href="/tutti-ed">Learn More</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
<!-- <img class="iphone" src="img/hero-slider/iphone.png" width="649" height="400" alt="Coming Soon Page"/> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.DEV</h2>
<p>BY DEVELOPERS, FOR DEVELOPERS</p>
<p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently. Get it together with Tutti!</p>
<a class="btn btn-primary" href="/tutti-dev">Learn more</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:70px;" class="text-left">WHY AVENIROS?</h2>
<p>Our team has been building content delivery platforms for over 20 years. We have experience with development from large scale LMS installations to mobile applications. We can offer full turn-key technical services for your content or help your technical team get to market on time.
</p>
<a class="btn btn-primary" href="#" data-scrollto="#about">About us</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<div class="video">
<!-- <img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/> -->
<!--
<img src="img/hero-slider/macbook.png" width="782" height="422" alt=""/>
<div class="vide-holder">
<iframe src="//player.vimeo.com/video/79036490?byline=0&portrait=0&color=ffeeac" width="720" height="405"></iframe>
</div>
-->
</div>
</div>
</div>
</div></div><div class="bx-controls bx-has-pager"><div class="bx-pager bx-default-pager"><div class="bx-pager-item">1</div><div class="bx-pager-item">2</div><div class="bx-pager-item">3</div></div></div></div>
</div>
</div>
</div>
<!--Hero Slider-->
<div class=" col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" id="hero-right" style="height: 496px;">
<div>
<div>
<div class="animated fadeInLeft">
<h1>Learnosity</h1>
<p>Did you know we are partnered with learnosity?</p>
<p>To learn more click the button below..filler. </p>
<a class="btn btn-primary" href="#">Learnosity</a>
</div>
</div>
</div>
<!--Close Hero Slider-->
</div>
</div>
</section>
This should work
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
You need to determine screen height for that so its better to use JavaScript
which can be accessed with screen.height. Also if you are using jQuery, you can get this property with $( window ).height();
$(document).ready(function() {
h=$(window).height();
$('.hero').css({'height':h+'px'});
});
Related
In col-2, I am trying to center the "WHAT" text over the image.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
As we resize the browser, the row height will change so that everything in col-10 fits. I am using object-fit:contain to keep the image proportions correct. I need the "stack-Txt" div to resize with the image so that the text will stay centered over the image
Or maybe you know of a better way to achieve this?
Current Idea:
Put WHAT in another child div, make flex, center text with justify-content/align-items
&
JS addEventListener to window resize, get the img div and set nextSibling size equal to this.
These were the css classes at some point... but the only important thing is that the img doesn't overflow the col-2 or the height (which is variable based on the length of col-10)
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Note: I also have media queries to resize text, but this shouldn't make a difference.
If you are using Bootstrap 5 you can just use the built-in classes to achieve so.
Apply .position-relative to the main div parent
Apply .img-fluid to <img /> to make image responsive
Apply .position-absolute, .top-50, .start-50, translate-middle to stack-Txt to center it vertically and horizontally over the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent position-relative">
<img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
<div class="stack-Txt position-absolute top-50 start-50 translate-middle">
<div class="fourWsText stack-Txt-child text-white">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
If you don't, just edit your CSS as follow:
.stackParent {
position: relative
}
/* make image responsive */
.stack-Img {
max-width: 100%;
height: auto;
}
.stack-Txt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="https://source.unsplash.com/random">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
The text "what" is in center over the image in any screen resolution.
.stackParent{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.stack-Img{
position: absolute;
margin: 0;
min-height: 15vh;
max-height: 15vh;
}
.stack-Txt{
z-index: 99;
}
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
I am using a background image and an overlay in my div. But the overlay doesn't overlap properly. It is leaving some margins at both the sides for reasons. I tried setting margins so that it overlaps completely but then it disturbs my layout.
How can i correct it?
/*numscroller*/
.image{
height:auto;
width:100%;
background:#FFCC99;
}
.over2{
height:auto;
width:100%;
background-color:rgba(0,0,0, 0.7);
}
.num{
margin:auto;
padding:6rem 0rem;
float:left;
}
<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row " >
<div class="col-12 image">
<div class="over2">
<div class="row justify-content-around">
<div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<center>
<h3><b>Slums covered</b></h3>
<h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Lives changed</b></h3>
<h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Our supporters</b></h3>
<h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
</center>
</div><!--num col-10 ends-->
</div><!--row justify ends-->
</div><!--over ends-->
</div><!--col-12 ends-->
</div><!--row ends-->
</div>
you can position the image container relatively, and the overlay should be position absolutely.
.image {
position: relative;
height: 100px;
width: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
}
<div class="image">
<span>I am the image </span>
<div class="overlay">
I am the overlay
</div>
</div>
I am trying to build an expanding preview like http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/.
But I need to customize it based on my requirement.
Please check this fiddle.
Problems I am facing are:
The pointer does not point to the image properly. (it points but hides behind the box)
When clicking on first image, all the elements to the right shifts down.
Along with that I would also like to ask, can we fit all the 8 circular div in a single row?
Thank you.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
margin: 0 0 0 -6px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 0 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">
<div class="col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">1</div>
</a>
</div>
<div id="tab1" class="tab">Tab 1</div>
<div class="col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">2</div>
</a>
</div>
<div id="tab2" class="tab">Tab 2</div>
<div class="col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">3</div>
</a>
</div>
<div id="tab3" class="tab">Tab 3</div>
<div class="col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">4</div>
</a>
</div>
<div id="tab4" class="tab">Tab 4</div>
<div class="col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">5</div>
</a>
</div>
<div id="tab5" class="tab">Tab 5</div>
<div class="col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">6</div>
</a>
</div>
<div id="tab6" class="tab">Tab 6</div>
<div class="col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">7</div>
</a>
</div>
<div id="tab7" class="tab">Tab 7</div>
<div class="col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">8</div>
</a>
</div>
<div id="tab8" class="tab">Tab 8</div>
</div>
Please check this fiddle: https://jsfiddle.net/LyL8vkmr/4/
I put each col-sm-2 inside a <div class="row"></div> and I put all the tabs in a separate <div class="row"></div>. Now when you click a circle, it opens a tab in the row underneath it and pushes all the circles in the next row. However it still doesn't work perfectly because when you resize it to small size and click on a circle, the tab opens up at the very bottom of the row and you can't see it easily.
Also note I changed col-sm-2 to col-sm-1 since you said you wanted 8 divs in a row. The only problem with this is that it doesn't stretch 100% across. If you want 8 columns to stretch all the way across then you need to use a custom version of bootstrap. Just go here and enter 8 for the #grid-columns field.
I'm making a static website on which I have too many parallax images. Basically each section is separated by a parallax image. Now the problem that I'm facing is, as I'm building my website and adding sections and more parallax images, some of the images near the bottom of the website are moving out of the frame. What I mean by this is, that the images are probably starting at the wrong position, and then as I scroll, they end up moving out of their div or frame and I see empty space underneath the image.
This is not happening for all images though; only images near the bottom of the website experience this problem. Furthermore, the lower an image is, the more pronounced this problem is.
Here is my code for inserting the parallax images:
<div class="section parallax light-translucent-bg parallax-bg-5">
<div class="container">
<div class="call-to-action">
</div>
</div>
</div>
Here is the CSS for this div:
.parallax-bg-5 {
background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat;
}
use background-attachment: fixed
Example
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2 {
color: #fff;
text-align: center;
padding: 25px 0;
margin: 0;
}
.block-parallax {
overflow: hidden;
position: relative;
}
.block-parallax .parallax-bg {
background-attachment: fixed;
background-position: 0px 0px;
background-repeat: repeat;
height: 100%;
position: absolute;
width: 100%;
min-width: 1170px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.block-parallax .md-box {
padding: 200px 0 200px;
background: rgba(0, 0, 0, 0.75);
position: relative;
height: 100%;
text-align: center;
}
.block-parallax-1 .parallax-bg {
background-image: url('http://healthfitnessrevolution.com/wp-content/uploads/2013/10/Olympic_Boxing-featured-image.jpg');
}
.block-parallax-2 .parallax-bg {
background-image: url('http://www.seankernan.com/data/photos/201_1kampala_boxing_3273.jpg');
}
.block-parallax-3 .parallax-bg {
background-image: url('http://www.omaa.org.uk/sites/default/files/Boxing-008.jpg');
}
.block-parallax-4 .parallax-bg {
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSw56f8j5e70Gl8gZtH4Qgmq9wTo-aG3u3ZTgx6Uhs1M8ljMoU0Sg');
}
.block-parallax-5 .parallax-bg {
background-image: url('http://www.hdwallpaperscool.com/wp-content/uploads/2014/08/boxing-hd-wallpapers-of-high-resolution-free.jpg');
}
.block-parallax-6 .parallax-bg {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS65xrl17ug548Rzu04Ahb6oeMAVkg2mGtyNY2t4TllnaMqfCKA');
}
.block-parallax-7 .parallax-bg {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSC8mBv8rOCIQ8pg7eaj3-6croM0P75HnbwVJgarkOTpFwSj9U6');
}
.block-parallax-8 .parallax-bg {
background-image: url('http://thumbnails.cbsig.net/CBS_Production_Showtime/CBS_Production_Showtime/2009/09/25/Sports/Boxing/193/694/boxing_supersix_farhood_cbsan.jpg');
}
.block-parallax-9 .parallax-bg {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2XSMnKMHMD5Rn8LvbfD6hGWGLlIrWwczW433sMgfpuSh3iU1Agw');
}
.block-parallax-10 .parallax-bg {
background-image: url('http://www.mymmainfo.com/wp-content/uploads/2011/12/pay-per-view-boxing.jpg');
}
<section class="block-parallax block-parallax-1">
<div class="parallax-bg"></div>
<div class="md-box">
<h1>background 1</h1>
</div>
</section>
<section class="block-parallax block-parallax-2">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 2</h2>
</div>
</section>
<section class="block-parallax block-parallax-3">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 3</h2>
</div>
</section>
<section class="block-parallax block-parallax-4">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 4</h2>
</div>
</section>
<section class="block-parallax block-parallax-5">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 5</h2>
</div>
</section>
<section class="block-parallax block-parallax-6">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 6</h2>
</div>
</section>
<section class="block-parallax block-parallax-7">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 7</h2>
</div>
</section>
<section class="block-parallax block-parallax-8">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 8</h2>
</div>
</section>
<section class="block-parallax block-parallax-9">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 9</h2>
</div>
</section>
<section class="block-parallax block-parallax-10">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 10</h2>
</div>
</section>
fiddle
So I solved this problem by making the images repeat. As I mentioned in the comments, I just discovered the crux of the problem. Each image starts moving as soon as you start scrolling on the website from the very top. This means that by the time you reach the bottom off the website, the images over there have moved too much and are out of the div.
So for example, I changed
.parallax-bg-4 {
background: url("../images/parallax-bg-4.jpg") 50% 0px no-repeat;
}
to
.parallax-bg-4 {
background: url("../images/parallax-bg-4.jpg") 50% 0px;
}
and repeated doing this for every div or image with parallax.
I am concerned a little bit about performance and did notice my laptop heating up when I repeated the images and I have a very powerful machine (rMBP 15"). If anyone has a better solution, please post it here.
Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>
Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>