I want to align 5 images in the page, i want to put three images in row in the middle of the page and in the next row i want to put two images below those in the row in the middle but it is not happening,Can anyone help me to sort out
<div class="top container">
<div class="row">
<section class="col-md-4">
<img src="images/1.png">
</section>
<section class="col-md-4">
<img src="images/1.png">
</section>
<section class="col-md-4">
<img src="images/1.png">
</section>
</div>
</div>
<br/>
<br/>
<div class="top1 container">
<div class="row">
<section class="col-md-4">
<img src="images/2.png">
</section>
<section class="col-md-4">
<img src="images/2.png">
</section>
</div>
</div>
use:
<div class="top container">
<div class="row">
<section class="col-md-4 col-md-offset-4">
<img src="images/1.png">
</section>
<section class="col-md-4">
<img src="images/1.png">
</section>
<section class="col-md-4">
<img src="images/1.png">
</section>
</div>
</div>
<br/>
<br/>
<div class="top1 container">
<div class="row">
<section class="col-md-4 col-md-offset-4">
<img src="images/2.png">
</section>
<section class="col-md-4">
<img src="images/2.png">
</section>
</div>
</div>
Related
My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
I have a footer where in section, I need it to be seperated into 4 parts. 2 up and 2 down. How to do this? I have attached the code. I have attached the image on how i wanted it.
Click to see Image
<div className="footer">
<div className="row full-width">
<div className="large-6 columns">
<div className="row">
<div className="small-12 medium-3 large-4 columns">
<img className="" src="" alt="logo"/>
<div className="contact-info">
<p className="address">address</p>
<p className="email">mail</p>
<p className="tele">53343</p>
</div>
</div>
<div className="small-6 medium-3 large-8 columns">
<div className="row">
<ul className="list-unstyled ">
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Fast Shipping</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Free Return</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Price Gurantee </p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Online Support</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="large-6 columns">
<div className="row">
</div>
</div>
</div>
</div>
Thanks
you should remove all the className properties from your elements and just use class. as noted in the Docs, the grid of foundation works with <div class=""> elements so you're code messes up things a bit.
read more here: http://foundation.zurb.com/sites/docs/grid.html#basics
and a scheme of the footer would be like:
<div class="row footer">
<div class="small-6 columns">
<img src="...">
<p>some text</p>
</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div><!-- end of row -->
I have an upload component that previews selected images before the user can upload them to the server.
I want to display a maximum of 3 on the desktop and a maximum of 2 on the tablet and 1 on the mobile.
I don't know how many images the user will upload so it is a dynamic amount.
An example of an upload would generate something like this for 4 files.
<div>
<div>
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>obomber.jpg</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/498e5d16-114e-41b5-8d4d-4e798c36861c" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail>
<div class="caption">
<h3><span>podcasts.png</span></h3>
<p>Delete</p>
</div>
<img src="blob:http%3A//localhost%3A3030/08a89a31-6822-4436-a8be-e89ddfee9f0f" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>tangents.png</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/ae1c844f-f0d2-4a50-a0b1-c46b4c00a4ba" class="img-thumbnail">
</div>
</div>
</div>
So as some said in a comment use the bootstrap grid system, very useful and this can all be achieved by doing using this
http://getbootstrap.com/css/#grid
Here is something that you might be able to use sorry on my phone at the moment might be rough:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
</div>
</div>
I am creating few accordions using bootstrap 3. My requirement is all accordions should be expanded by default in 1024 resolution and above. on click it should hide
But in mobile devices it should be in collapse mode by default. on click it should expand
Here is my code:
<div class="panel-group" id="accordion">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- Asia Starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
Asia
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">China
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">India
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Thailand
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Singapore
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- Asia ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- europe starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Europe
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Germany
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">The Netherlands
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Denmark
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Italy
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">France
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Belgium
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Sweden
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- europe ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- middle east north africa starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Middle East and North Africa
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">UAE
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Israel
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Saudi Arabia
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Egypt
</div>
</div>
</div>
<!-- flags-->
</div>
</div>
<!-- middle east north africa ends-->
</div>
</div>
<!-- 1st row ends-->
</div>
http://jsfiddle.net/monicaRegal/q5rLx1dn/1/embedded/result/
Thank you
Monica Mandal
Try this:
$(document).ready(function(){
var windowWidth = $(window).width();
if(windowWidth <= 1024) //for iPad & smaller devices
$('.panel-collapse').removeClass('in')
});
In your css:
#media (max-width: 768px)
{
.collapse.in {
display: none;
}
}
Abdulla's answer almost worked for me, however, I had to use collapse() instead of removeClass('in')
jQuery(document).ready(function(){
var windowWidth = jQuery(window).width();
if(windowWidth <= 1024) { //for iPad & smaller devices
jQuery('.panel-collapse').collapse()
}
});
Try This.
function adjustCollapseView(){
var desktopView = $(document).width();
if(desktopView >= "1024"){
$("#accordion a[data-toggle]").attr("data-toggle","");
$("#accordion .collapse").addClass("in").css("height","auto")
}else{
$("#accordion a[data-toggle]").attr("data-toggle","collapse");
$("#accordion .collapse").removeClass("in").css("height","0")
$("#accordion .collapse:first").addClass("in").css("height","auto")
}
}
$(function(){
adjustCollapseView();
$(window).on("resize", function(){
adjustCollapseView();
});
});
I am making a bootstrap 3 thumbnail slider, it looks like below.
<div id="homeSlider" class="carousel slide">
<ol class="carousel-indicators">
//indicators
</ol>
<section class="carousel-inner">
<div class="item active">
<div class="col-md-3">
//thumbnail
</div>
<div class="col-md-3">
//thumbnail
</div>
<div class="col-md-3">
//thumbnail
</div>
<div class="col-md-3">
//thumbnail
</div>
</div>
<div class="item">
<div class="col-md-3">
//thumbnail
</div>
<div class="col-md-3">
//thumbnail
</div>
<div class="col-md-3">
//thumbnail
</div>
<div class="col-md-3">
//thumbnail
</div>
</div>
</section>
//Carousal Controls
</div>
The twist is that i need to slide a single thumbnail at a time not the whole set of 4 thumbnails.
Looking forward for help !!
If you want to slide one item at a time and not all 4 thumbs, all you have to do is to use the default carousel code and you will have one thumbnail/item and not 4 like it is in your example
<section class="carousel-inner">
<div class="item active">
//thumbnail
</div>
<div class="item">
//thumbnail
</div>
...
...
<div class="item">
//thumbnail
</div>
</section>