How can we center FA Icons within a Boostrap grid? - twitter-bootstrap-3

I'm using the Bootstrap grid system to display some FA Icons within a small grid. I've been attempting to make them evenly aligned horizontally to no avail, here is what they currently look like:
Please see my code below:
<div class="col-sm col-md-4 text-center">
<span class="info-box-text"><input type="text" class="form-control" placeholder="Name this icon..." style="text-align: center;"/></span>
<div class="col-sm col-md-12 block-center" style="margin-top: 10px;">
<div class="col-sm-3"><i class="fa fa-info"></i></div>
<div class="col-sm-3"><i class="fa fa-crosshairs"></i></div>
<div class="col-sm-3"><i class="fa fa-question"></i></div>
<div class="col-sm-3"><i class="fa fa-flag-o"></i></div>
</div>
<div class="col-sm col-md-12">
<div class="col-sm-3"><i class="fa fa-lock"></i></div>
<div class="col-sm-3"><i class="fa fa-tachometer"></i></div>
<div class="col-sm-3"><i class="fa fa-power-off"></i></div>
<div class="col-sm-3"><i class="fa fa-play"></i></div>
</div>
<div class="col-sm col-md-12">
<div class="col-sm-3"><i class="fa fa-tint"></i></div>
<div class="col-sm-3"><i class="fa fa-ban"></i></div>
<div class="col-sm-3"><i class="fa fa-cogs"></i></div>
<div class="col-sm-3"><i class="fa fa-bolt"></i></div>
</div>
<div class="col-sm col-md-12">
<div class="col-sm-3"><i class="fa fa-heart-o"></i></div>
<div class="col-sm-3"><i class="fa fa-stethoscope"></i></div>
<div class="col-sm-3"><i class="fa fa-gear"></i></div>
<div class="col-sm-3"><i class="fa fa-arrow-up"></i></div>
</div>
<div class="col-sm col-md-12">
<div class="col-sm-3"><i class="fa fa-arrow-down"></i></div>
<div class="col-sm-3"><i class="fa fa-pause"></i></div>
<div class="col-sm-3"><i class="fa fa-exclamation"></i></div>
<div class="col-sm-3"><i class="fa fa-asterisk"></i></div>
</div>
</div>


Try adding the fa-fw class.
It sets the icons width to the same fixed width.
You can read more in the docs https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons


You should put your inner cols (col-sm-3) inside of a row for them to behave properly.
Like this:
<div class="col-sm col-md-4 text-center">
<span class="info-box-text"><input type="text" class="form-control" placeholder="Name this icon..." style="text-align: center;"/></span>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-3"><i class="fa fa-info"></i></div>
<div class="col-sm-3"><i class="fa fa-crosshairs"></i></div>
<div class="col-sm-3"><i class="fa fa-question"></i></div>
<div class="col-sm-3"><i class="fa fa-flag-o"></i></div>
</div>
<div class="row">
<div class="col-sm-3"><i class="fa fa-lock"></i></div>
<div class="col-sm-3"><i class="fa fa-tachometer"></i></div>
<div class="col-sm-3"><i class="fa fa-power-off"></i></div>
<div class="col-sm-3"><i class="fa fa-play"></i></div>
</div>
<div class="row">
<div class="col-sm-3"><i class="fa fa-tint"></i></div>
<div class="col-sm-3"><i class="fa fa-ban"></i></div>
<div class="col-sm-3"><i class="fa fa-cogs"></i></div>
<div class="col-sm-3"><i class="fa fa-bolt"></i></div>
</div>
<div class="row">
<div class="col-sm-3"><i class="fa fa-heart-o"></i></div>
<div class="col-sm-3"><i class="fa fa-stethoscope"></i></div>
<div class="col-sm-3"><i class="fa fa-gear"></i></div>
<div class="col-sm-3"><i class="fa fa-arrow-up"></i></div>
</div>
<div class="row">
<div class="col-sm-3"><i class="fa fa-arrow-down"></i></div>
<div class="col-sm-3"><i class="fa fa-pause"></i></div>
<div class="col-sm-3"><i class="fa fa-exclamation"></i></div>
<div class="col-sm-3"><i class="fa fa-asterisk"></i></div>
</div>
</div>
Cols don't behave properly inside of other cols, its always best to use Row->col->row->col format.

Related

this code i'm using in not a mobile responsive

This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- ====================================================
header section -->
<header class="top-header" >
<div class="container">
<div class="row">
<div class="col-xs-5 header-logo">
<br>
<img src="img/logo.png" alt="" class="img-responsive logo">
</div>
<div class="col-md-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="http://www.mysite" >Home</a></li>
<li><a class="menu" href="#products">our products </a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header> <!-- end of header area -->
<section class="slider" id="home">
<div class="container-fluid">
<div class="row">
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<div class="header-backup"></div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<br />
<div class="container" id="products">
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/women-care.jpg" style="width: 140px; height: 140px;">
<h2>Women Care</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/man-power.jpg" style="width: 140px; height: 140px;">
<h2>Man Power</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
</div>
<!-- map section -->
<section class="api-map" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map" id="map"></div>
</div>
</div>
</section><!-- end of map section -->
<!-- contact section starts here -->
<section class="contact">
<div class="container">
<div class="row">
<div class="contact-caption clearfix">
<div class="contact-Product Name text-center">
<h2>contact us</h2>
</div>
<div class="col-md-5 contact-info text-left">
<h3>contact information</h3>
<div class="info-detail">
<ul><li><i class="fa fa-calendar"></i><span>Monday - Sunday:</span> 24X7</li></ul>
<ul><li><i class="fa fa-map-marker"></i><span>Address:</span></li></ul>
<ul><li><i class="fa fa-phone"></i><span>Telephone:</span> </li></ul>
<ul><li><i class="fa fa-envelope"></i><span>Email:</span> info#mysite</li></ul>
</div>
</div>
<div class="col-md-6 col-md-offset-1 contact-form">
<h3>leave us a message</h3>
<form class="form">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email">
<input class="phone" type="text" placeholder="Phone No:">
<textarea class="message" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="SUBMIT">
</form>
</div>
</div>
</div>
</div>
</section><!-- end of contact section -->
<!-- footer starts here -->
<footer class="footer clearfix">
<div class="container">
<div class="row">
<div class="col-xs-6 footer-para">
<p><i style="color:white;">©</i> <i style="color:white;">mysite</i> All right reserved</p>
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-skype"></i>
</div>
</div>
</div>
</footer>
<!-- script tags
============================================================= -->
<script src="js/jquery-2.1.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>

Navigating multiple carousel items with bootstrap 3

How to make carousel items navigate as a group with bootstrap 3? Rather than moving items one at a time how can we make the multiple items move at a click. For e.g. If i see slides 1,2,3 the next carousel control should display slides 4,5,6.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="images\link4\Picture1.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture5.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next = next.next();
if (next.length>0) {
next.children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
} }
});
</script>

There's no need for the extra JS. Just use the standard Bootstrap carousel...
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
</div>
http://www.codeply.com/go/Vnvl4HqgKJ

Selenium - click the second prompt with same ID

I have a complex HTML like the below.There are at least two elements with data-automation-id='promptIcon' attribute. In Selenium IDE //*[#data-automation-id='promptIcon']/ selected the first occurrence (i.e. next to the label Category). Now I would like to click/select the second element with data-automation-id='promptIcon' attribute (next to the label Owner). How best to accomplish this?
<div class="GB-VO1SBAIJ">
<div class="GB-VO1SBNHJ" style="left: 0%;">
<div id="wd-EditPage-1$4296" class="GB-VO1SBOXH GB-VO1SBHXH GB-VO1SBJXH GB-VO1SBJN">
<div class="GB-VO1SBBYH">
<div class="GB-VO1SBJN" id="wd-PageContent-6$8263">
<div class="GB-VO1SBAJH">
<div class="GB-VO1SBIIH">
<div id="wd-Panel-6$8269" data-automation-id="panel" class="GB-VO1SBF1J GB-VO1SBJN">
<div class="gwt-Label GB-VO1SBJ1J GB-VO1SBI1J">
</div>
<div class="GB-VO1SBH1J">
<div class="GB-VO1SBAJH GB-VO1SBG1J">
<ul role="presentation" class="GB-VO1SBNHH GB-VO1SBGIH">
<li role="presentation" class="GB-VO1SBDHH GB-VO1SBJIH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$20858--uid318-formLabel">Category<span class="gwt-InlineLabel GB-VO1SBDIH"> Required</span>
</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Category</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$20858--uid318-formLabel" aria-invalid="false" tabindex="-2" id="15$20858--uid318" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJN GB-VO1SBIEL GB-VO1SBPFL GB-VO1SBNFL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="list" class="GB-VO1SBJUI GB-VO1SBOUI GB-VO1SBGFL" tabindex="-2">
<li class="GB-VO1SBNUI">
<div id="-uid331" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$2" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Common" data-automation-label="Common" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Common</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
<li class="GB-VO1SBNUI">
<div id="-uid332" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$3" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Absence" data-automation-label="Absence" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Absence</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
<div aria-hidden="true" tabindex="0" style="display: none;" class="GB-VO1SBP3I" role="button" data-automation-morelinkexpanded="false" data-automation-id="wd-MoreLink">
<img alt="" draggable="false" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="gwt-Image GB-VO1SBPII GB-VO1SBB4I">
<span title="More (-3)" class="GB-VO1SBC4I">More (-3)</span>
</div>
</div>
</div>
</li>
<li role="presentation" class="GB-VO1SBDHH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$26787--uid319-formLabel">Owner</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Owner</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$26787--uid319-formLabel" aria-invalid="false" tabindex="-2" id="15$26787--uid319" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJEL GB-VO1SBJN GB-VO1SBIEL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="menu" class="GB-VO1SBJUI GB-VO1SBGFL GB-VO1SBOUI" tabindex="-2">
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="GB-VO1SBIYH">
</div>
<footer class="GB-VO1SBCYH">
<div>
<div data-automation-id="toolbarSupportingWidgetsContainer" class="GB-VO1SBOOE GB-VO1SBAOE">
<div class="GB-VO1SBLNE">
<div class="GB-VO1SBMNE">
<div class="GB-VO1SBCOE">
</div>
<div class="GB-VO1SBPOE">
</div>
</div>
</div>
<div>
<div class="gwt-Label GB-VO1SBDNE">
</div>
</div>
</div>
<div class="GB-VO1SBCPE GB-VO1SBEPE">
</div>
</div>
</footer>
</div>
</div>
</div>

If you are using XPath, there is a easy way to do it:
//*[#data-automation-id='promptIcon'][2]
Explaining:
//*[#data-automation-id='promptIcon']
It is your actual xpath, will select any html tag that has a attr named "data-automation-id" with the exactly value "promptIcon".
[2]
The element node that you want to select. if you put [5], XPath will try to select the 5° result in this html, based in what note you're calling it.

Need correct bootstrap classes for Paypal

I have tried every way to imitate this look in style and columns and just cannot get it with Bootstrap 3.
Can someone list the twitter bootstrap markup for this:
http://postimg.org/image/ftbd0fxtv/
I have been stuck for may days now.
I have tried the following:
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class ="col-md-4"></div>
</div>
</div>
thanks

demo: http://www.bootply.com/BCsPapR7Ww
html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-header">
<h1>Example page header<br><small>Subtext for header</small></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">Menu option 1</div>
<div class="col-sm-4">Menu option 2</div>
<div class="col-sm-4">Menu option 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
</div>
</div>
<nav class="text-center">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><span aria-hidden="true">»</span><span class="sr-only">Next</span></li>
</ul>
</nav>
<footer class="container">
<div class="row">
<div class="text-center">link 1 | link 2</div>
<div class="text-center">Powered by Bootstrap</div>
</div>
</footer>

Bootstrap carousel sliding too far

I am building my first site with bootstrap. it is going pretty good so far.
The only problem I haven't been able to fix is:
The bootstrap carousel is sliding to far. I have 3 items in carousel each has 5 pictures.
If I press the back button repeatedly (doesn't mather how many times), the carousel cycles trough the 3 items no problem.
but if I press the next button repeatedlly, after the third times it does not reset to 0.
What could be causing this?
<div class="row">
<div class="col-sm-12 thumb_box">
<div class="thumbs">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row thumb_row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>

I found the problem.
If you are having this problem check your div elements.
Something was wrong in my hierarchy of divs.