I'm trying to make a little gallery of some school works I've done in my animation class. I want to put 3 images on each line and they are all in divs because I did onion skin wrapping for a dropshadow on them. Unfortunately this makes them all just stick together in two lines across the page. But I want them specifically formatted so I tried to wrap a div of 480px wide around each set of 3. In IE this works great and it looks perfect. However in firefox it does this
I can't figure out why it is putting that one left aligned on the second line and therefore screwing up the order of the rest. Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ryan Merl's Portfolio</title>
<style type='text/css'>
* {
padding: 0px;
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
body {
background-color:#333333;
background-image: url('images/head.png');
background-repeat: repeat-x;
}
a {
color:#333333;
text-decoration: none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
div.main {
width: 800px;
background-color:#FFFFFF;
margin-top: 10px;
color: #000000;
height: 1000px;
margin-bottom: 10px;
}
img.thumb {
}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float:left;
background:url('images/shadow.gif') right bottom no-repeat;
}
.wrap2 {
background:url('images/corner_bl.gif') left bottom no-repeat;
}
.wrap3 {
padding:0 4px 4px 0;
background:url('images/corner_tr.gif' ) right top no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="doc/css/style.css" />
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript" src="glossy.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('en', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html','img', 'swf'], 'src/player');
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<body>
<center><div class='main'>
<img src='images/theantistudio.png' /><br /><br />
<img src='images/gallery.png' /><br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_particle_fire.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fire.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_firework.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_firework.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_fountain.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fountain.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_logo.flv' rel='shadowbox'><img class='thumb' src= 'thumbs/thumb_logo.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_rocket_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_rocket.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_solar_system.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_solar_system.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_space_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_space_ship.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_still_life.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_still_life.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_walkthrough.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_walkthrough.png' /></a>
</div>
</div>
</div>
</div>
</div></center>
</body>
</html>
It looks like your second image may be slightly taller than your third. So your floated second line is only floating back until it hits the second image. Either set your image or wrap1 heights, or add style="clear:both" to the break tags between lines.
I cannot see your picture, but based on your description it sounds like you're not clearing the floats. You have a br after each block of three images in a div, so adding the following CSS will clear the floats and show three in a row.
br { clear: both; }
Also, if there is not enough width on a specified "line", it will drop down to the next line. Try making the window as wide as possible (click n drag) and see if this is the issue.
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
I have problem with my footer. I am using ASP.NET Core 2 MVC, with Razor View.
Right now I tryed everything from this, including comments:
https://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Note, that I do not want fixed footer. I know that there is several similar topics in SO, but I tryed already everything I found. I belive that I am missig something obvoius. I work on this whole day already and it just stops me.
Every time my footer is rendered just below Edit, Delete buttons, or somewhere in the middle of page. I am guessing that it might be something with my _Layout architecutre or for in Index file is causing ot somehow.
My _Layout.cshtml looks like this:
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
#RenderBody()
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div></div>
</footer>
</div>
</div>
My Index.cshtml looks like (for most of the cases footer was rendered below Edit/Delete form:
<div>
#if (Context.User.Identity.IsAuthenticated)
{
<a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
}
<div>
#foreach (var item in Model)
{
<div class="projectContainer col-lg-6">
#if (Context.User.Identity.IsAuthenticated)
{
<form asp-action="Delete" method="post">
<a asp-action="Edit" class="btn btn-sm btn-warning"
asp-route-projectID="#item.ProjectID">
Edit
</a>
<input type="hidden" name="ProjectID" value="#item.ProjectID" />
<button type="submit" class="btn btn-danger btn-sm">
Delete
</button>
</form>
}
<div class="innerContainer" style="background-color: #item.BackColor">
<div class="projectHeader col-xs-12">
#item.Name
</div>
<div class="hyperButton col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID">See more ></a>
</div>
<div class="projectPictures col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID"><img src="#item.PictureUrl" asp-append-version="true" /></a>
</div>
</div>
</div>
}
</div>
</div>
My site.css looks like that right now:
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
UPDATE with source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
<script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/dist/site.css" />
<style>
.input-validation-error {
border-color: red;
background-color: #fee;
}
</style>
<title>
Przemyslaw Bak - My projects
</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--HEADER-->
<div class="mainHeader">
<div class="helloTextContainer col-12">
<div class="helloTxtWrapper">Hi! I am</div>
</div>
<div class="mainTextContainer col-sm-9 col-xs-12">
<div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
</div>
<div class="socialContainer col-sm-3 hidden-sm-down">
<!--VIEW COMPONENT-->
<i class="fab fa-facebook-square"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-github-square"></i>
</div>
</div>
<div class="mainNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<div class="stickyNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<!--HERE TRIGGERS APP.JS-->
<div class="emptySpace" id="app"></div>
</div>
<!--BODY-->
<div class="content">
<!--button-->
<style>
.projects {
color: gray !important;
}
</style>
<div>
<div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #E8E8E8">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="#" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #fafafa">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #f9fbf8">
<div class="projectHeader col-xs-12">
Best project ever
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<footer>
<div class="footText">© 2018 - Przemyslaw Bak</div>
</footer>
</div>
</div>
<!--SCRIPTS-->
<script src="/dist/bundle.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>
Currently after scrolling down my footer looks like this (2018 - Przemyslaw Bak):
UPDATE2:
I am using Bootstrap 4, maybe it changes something
Take out that position: absolute; in the footer CSS
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
<p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p>
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div>Div inside footer</div>
</footer>
</div>
</div>
if you using bootstrap 4 there good solition for you,
https://getbootstrap.com/docs/4.0/utilities/flex/#align-self
you need self item end if you wanna use to bootstrap I think you should be use this.
After Viktor`s comments I stripped out my HTML code and started to suspect, that my Bootstrap (previously 4.0.6) is messing up something.
So I started to Google "flush footer bootstrap" and I found this:
Flush footer to the bottom of the page in bootstrap 4
After installation Bootstrap 4.1.X files, I changed my site.css and _Layout.cshtml as follows:
body, wrapper {
min-height: 100vh;
}
footer {
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
_Layout.cshtml:
<body>
<wrapper class="d-flex flex-column">
//nav bar
//render body
<main class="container-fluid py-3 flex-fill">
#RenderBody()
</main>
//footer
<footer>
<div class="footText">© #DateTime.Now.Year - Przemyslaw Bak</div>
</footer>
</wrapper>
//scripts
</body>
And it works!
i am newbie to web development and i am working on materialize cards.It is working correctly in laptop but when i try to run it in iPad the cards are getting overlap.
.container-fluid {
margin-top: 500px;
/*
padding-left: 100px;
padding-right: 100px;
*/
}
.card-reveal {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.7) !important;
}
div.card-reveal span.card-title {
color: #ffffff !important;
}
.card {
width: 280px;
height: 360px;
z-index: 5 background-color: blue;
}
#card-img {
height: 200px;
}
.card-content {
margin-top: -17px;
color: black;
}
.card-action {
margin-top: 38px;
}
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/stackcss.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col m3">
<div class="card hover-reveal sticky-action z-depth-2">
<div class="card-image waves-effect waves-block waves-light">
<img id="card-img" class="activator z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
</div>
<div id="thumbnail" class="z-depth-5"></div>
<div class="card-content">
<p>Card Title<i class="material-icons right">more_vert</i></p>
<!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
</div>
<div class="card-action">
VIEW
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col m3">
<div class="card hover-reveal sticky-action z-depth-2">
<div class="card-image waves-effect waves-block waves-light">
<img id="card-img" class="activator z-depth-5" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
</div>
<div id="thumbnail" class="z-depth-5"></div>
<div class="card-content">
<p>Card Title<i class="material-icons right">more_vert</i></p>
<!--<span class="card-title activator grey-text text-darken-4 ">THis is a link</span>-->
</div>
<div class="card-action">
VIEW
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/matjs.js"></script>
</body>
</html>
You are trying to have four cards in a line, each of the cards is 280px wide, and that makes it 1120px of total width. In addition, you have 50px of left and right margins (.container-fluid), which will add a 100px to the total width. Eventually you are going to have some space between those cards, so add another hundred. 1320px of total width for this section is a minimum that will allow you to have four of these cards in a line. According to the Materialize documentation the .m3 class that you’ve assigned to your cards will keep all these cards in a .row in a single line up until your screen resolution greater than 600px wide, otherwise all cards will be rearranged to fill multiple lines.
Basic on what materialize is offering you can change .m3 classes to .xl3 and thereby buy another 600px. But your 1320px section is still be wider than 1200px for .xl class, so you may consider to reduce .container-fluid’s left and right margins and/or reduce card’s width.
I am trying to achieve the following design for a bootstrap slider:
And you are right Stack, it does seem to be an awful lot of code in this post. Sometimes this is the nature of posts in programming websites to be mostly code.
So After writing the top paragraph, stack still needs me to add more detail. Let me add that I will be very grateful if someone could help me out and either point me to a gallery that works as my template is designed or give me some ideas how to transform bootstrap slider to my needs.
this is the code:
css:
<style>
.selected img {
opacity:0.5;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: visible !important;
}
</style>
the script:
<script>
$('#myCarousel').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
</script>
And the code:
<div class="container" style="margin-top:20px;">
<!-- main slider carousel -->
<div class="row">
<div class="col-md-12" id="slider">
<div class="col-md-3"> </div>
<div class="col-md-6" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-responsive">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-responsive">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-responsive">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-responsive">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-responsive">
</div>
<div class="item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-responsive">
</div>
<div class="item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-responsive">
</div>
</div>
<!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="col-md-3"> </div>
</div>
</div>
<!--/main slider carousel-->
<!-- thumb navigation carousel -->
<div class="col-md-12 hidden-sm hidden-xs text-center" id="slider-thumbs" style="margin-top:20px;">
<!-- thumb navigation carousel items -->
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected">
<img src="http://placehold.it/80x60&text=one" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-1">
<img src="http://placehold.it/80x60&text=two" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-2">
<img src="http://placehold.it/80x60&text=three" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-3">
<img src="http://placehold.it/80x60&text=four" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-4">
<img src="http://placehold.it/80x60&text=five" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-5">
<img src="http://placehold.it/80x60&text=six" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-6">
<img src="http://placehold.it/80x60&text=seven" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-7">
<img src="http://placehold.it/80x60&text=eight" class="img-responsive">
</a></li>
</ul>
</div>
</div>
I'd suggest using a third party plugin such as swiper. Swiper has some pretty neat demos: http://idangero.us/swiper/demos/
The demo I'm talking of is this one & I think it suits your needs: http://idangero.us/swiper/demos/300-thumbs-gallery.html
The code you will need (besides including the swiper scripts & css files) is found on github: https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
</script>
</body>
</html>
Here is the code:
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
box 2 content
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
box 3 content
</div>
</div>
CSS of the box:
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
This is how I want it to look like:
This is how it looks right now :
And this is how it looks when I remove the box class and write:
<div id="box1" class="col-lg-4 "style="">
How do I fix this??
Update (after adding margin:0 auto):
You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
</div>
This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.
If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
example using your fiddle
Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.
Or you can wrap the box in a column like this..
<div class="row" >
<div id="box1" class="col-lg-4"style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
Please check this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="row" >
<div id="box1" class="col-lg-4 text-center">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
</body>
</html>
CodePen:http://codepen.io/anon/pen/ZbOKKw