Please I am not familiar with Bootstrap 3 and I started to build a small web journal using this framework. I found some difficulties and hope to get some solutions.
My question is how can I code 3 thumbnails then change their order on mobile device?
<div class="col-lg-15 no-padding-left">
<div class="box-news">
<div class="block-title move no-margin">اقليم سيدي بنور</div>
<div class="news-items text-right">
<div class="col-lg-9">
<ul class="list-unstyled no-margin thumb">
<li class="thumbnail md">
<div class="col-xs-8">
اعطاء انطلاقة الدخول التربوي لأقسام التربية غيرالنظامية بسيدي بنور
</div>
<div class="col-xs-7 no-padding">
<img class="img-responsive" src="http://localhost/24/public/uploads/1444912297..jpg">
</div>
</li>
<li class="thumbnail md">
<div class="col-xs-8">
استخدام سيارة للنقل المدرسي في سرقة أسمدة فلاحية من ضيعة برلماني بسيدي بنور
</div>
<div class="col-xs-7 no-padding">
<img class="img-responsive" src="http://localhost/24/public/uploads/1444989659..jpg">
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="thumbnail lg">
<img src="http://localhost/24/public/uploads/1445377322..jpg" alt="...">
<div class="captison">
جماعة سيدي بنور تساهم في المبادرة الملكية 'مليون محفظة'
</div>
</div>
</div>
</div>
</div>
</div>
The result that I want in the image below
Something like this will work: http://jsfiddle.net/WOUNDEDStevenJones/vf4h17L5/1/
<div class="row">
<div class="col-xs-12 col-md-6">text1</div>
<div class="col-xs-12 col-md-6">text2</div>
<div class="col-xs-12 col-md-6">text3</div>
</div>
Related
incorrect display in browser
My html code works perfectly on my computer (local) but when I upload it to a server and view it in a browser, it doesn't display correctly. Specifically, I am building an 8 image photo gallery. Here's the code. Can you help me identify the problem?
<!--Start section-->
<section class="well well-bottom-null text-center">
<div class="container container-wide">
<h1>Services</h1>
<hr>
<div data-lightbox="gallery" class="row row-no-gutter offset-2">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/strategy1.jpg" data-lightbox="image"><img src="images/strategy1.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Strategic & Business Planning</h1>
<p>Proforma P&L Budgeting, <br> Business Plans</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/competitive.jpg" data-lightbox="image"><img src="images/competitive.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Competitive Analysis</h1>
<p>Situation Analysis, Virtual Market Surveys, Market Research</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/lead.jpg" data-lightbox="image"><img src="images/lead.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Lead Generation</h1>
<p>Inbound Marketing</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/web-design.jpg" data-lightbox="image"><img src="images/web-design.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Website Design</h1>
<p>Design, Content Generation, SEO</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/social.jpg" data-lightbox="image"><img src="images/social.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Social Media Marketing</h1>
<p>Social Relevance <br> Social Engagement</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/blog.jpg" data-lightbox="image"><img src="images/blog.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Content Generation</h1>
<p>Videos, Blogs, E-books, Articles</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/promo.jpg" data-lightbox="image"><img src="images/promo.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Marketing Collateral & Promotion</h1>
<p>Brochures, Post Cards, Flyers, Promotional Items</p>
</div><span class="overlay"></span></a></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="img-thumbnail text-center"><a href="images/events.jpg" data-lightbox="image"><img src="images/events.jpg" alt="" class="img-wide">
<div class="caption">
<h1>Corporate Events</h1>
<p>Trade Shows, Sales Meetings, <br> Customer Appreciation, <br>Team Building</p>
</div><span class="overlay"></span></a></div>
</div>
</div>
</div>
</section>
It could be many things, but I would start making sure the bootstrap folder is uploaded to your server and not just on your local machine.
If this is not the problem, than it is something within your CSS.
I need three images to be placed in the first row and two images in second row as shown in the below figure.
My code for the above image is as follows,
<div class="row" style="margin-left:15%">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Post Graduate</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a PhD Guy</p>
</div>
</div>
<br>
<div class="row" style="margin-left:20%">
<div class="col-xs-6 col-md-3" style="margin-left:20%">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">I'm a Course taking one</p>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="F:\Project P\img\logo_homework.png" alt="Engg">
</a>
<p style="text-align:center">Others</p>
</div>
</div>
But when I view it in mobile mode using chrome inspect element it is displayed as below
I know I have placed an extra div but if I don't place the div the fourth image is placed in the first row.
How can I get them aligned.
Maybe try this:
https://jsfiddle.net/68kycb4g/
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-offset-1 col-sm-5"></div>
<div class="col-xs-6 col-sm-5"></div>
</div>
I'm currently going through my site testing it at present mobile / desktop is fine, the issue I have is with ipad when viewing the search page on an ipad the tiles are squashed up against the left i.e 1 pic per row, ideally I would like to see two if not three in a row but I cannot get it to work as expected, the HTML mark up for the page is as follows:
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-5">
<div class="shop-filters" style="display: block;">
<form action="/search/members" method="post">
<div class="widget">
<h5 class="widget-title font-alt">Filter</h5>
</div>
Filter stuff goes here
</form>
</div>
</div>
#*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*#
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/1/new-to-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/mhcoeigrttdgemwjuig7" alt="Atkinson1988" />
</a>
<div class="footer">
<a href='/member/1/new-to-melbourne'>Atkinson1988</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, St kilda road<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/4/female-2-asian-male-tp'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/t4leodsoxa0h5zaqomt7" alt="Female2" />
</a>
<div class="footer">
<a href='/member/4/female-2-asian-male-tp'>Female2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Docklands<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
<span class="best-seller">Online</span>
</div>
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/j6xnf3lu2gffviv1qkw3" alt="Tester123" />
</a>
<div class="footer">
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>Tester123</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/2/i-am-a-female-from-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/hyssjfqilmyntk9gvi4r" alt="Female1" />
</a>
<div class="footer">
<a href='/member/2/i-am-a-female-from-melbourne'>Female1</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/3/male-2-lookin-for-male-training-partner'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="Male2" />
</a>
<div class="footer">
<a href='/member/3/male-2-lookin-for-male-training-partner'>Male2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Southbank<br /></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row text-center">
<div class="pagination-container"><ul class="pagination"><li class="active"><a>1</a></li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The above is rendered by doing the following withing MVC Razor view:
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-4">
<div class="shop-filters" style="display: block;">
#using (Html.BeginForm("Search", "Members", FormMethod.Post))
{
<div class="widget">
<h5 class="widget-title font-alt">My Filter</h5>
</div>
#Html.AntiForgeryToken()
}
</div>
</div>
#*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*#
<div class="col-lg-9 col-md-9 col-sm-8 ">
<div class="row">
#if (ViewBag.ListOfUsers.Count > 0)
{
foreach (var t in ViewBag.ListOfUsers)
{
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
#if (t.LoggedIn)
{
<span class="best-seller">Online</span>
}
</div>
<a href='#Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>
#if (!string.IsNullOrWhiteSpace(t.PhotoId))
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/#t.PhotoId" alt="#t.Username" />
}
else
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="#t.Username" />
}
</a>
<div class="footer">
<a href='#Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>#t.Username</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> #t.Location<br /></span>
</div>
</div>
</div>
}
<div class="clearfix"></div>
<div class="row text-center">
#Html.PagedListPager((IPagedList)ViewBag.ListOfUsers, page => Url.Action("Search", "Members", new { page }))
</div>
}
else
{
<div class="col-sm-8 col-sm-offset-2 text-center">
<p>
Sorry, we couldn't find anyone within the criteria you provided.
</p>
</div>
}
</div>
</div>
</div>
</div>
</div>
UPDATE
This is what it currently looks like using the above
My initial guess, without seeing a live demo, is that only one is being shown per row because of col-sm-6. As bootstrap has a 12 column layout if there is any padding or margin applied to the objects 6+6+padding is greater than 12 and will push it to the next row. My understanding is that there should be a "div.row" for each new row. Hope that helps.
I'm trying to make my tabs look like this (picture 1) at all sizes. However, when I resize my tabs they look like this (picture 2). How can I fix it?
Here's my fiddle:
https://jsfiddle.net/whywymam/86zgeLf1/
My HTML code:
<div class="Container">
<div class="row">
<div class="panel panel-center">
<div class="panel-header">
<h1>Job Category</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/bankinglogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/engineerlogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/healthcare.png" width="180px" >
<p class="bankingl">Healthcare</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/technicia.png" width="185px" >
<p class="bankingl">IT</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/oilandgas.png" width="200px" >
<p class="bankingl">Oil and Gas</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/retail.png" width="180px" >
<p class="bankingl">Retail and Hospitality</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="panel panel-default jobPanel center-block">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs nav-justified selected">
<li class="active">Job Search
</li>
<li>PYW
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> Search
</div>
</div>
</form>
</div>
<!--end of tab 1-->
<div class="tab-pane" id="tab2">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> Search
</div>
</div>
</form>
</div>
<!--end of tab 2-->
</div>
<!--end of tab content-->
</div>
<!-- end of tabbable-->
</div>
<!--end panel body-->
</div>
<!-- end of formTab -->
</div>
<!--end of panel container-->
<script src="bootstrap/js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</div>
Bootstrap takes a mobile-first approach, the code you have provided doesn't show the sign-in and sign-up tabs or fields.
But looking at your HTML markup, I can clearly tell you one thing you're missing.
The classes .col-sm-* , col-md-* , col-lg-*, since Bootstrap is mobile-first the class col-xs-* , is the class that you probably want to be adding to your HTML markup.
So I guess if your markup looks something like :
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
You got to add the col-xs-* clas as well so that at smaller widths (mobile and small device screens), the columns are maintained rather than tiled one after another.
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>
Further reading: Subtle magic of how the Bootstrap Grid works.
Hello i m new to bootstrap and i want to know how to display two images on one line and keep the responsive function.Can you give me an example ?
<div class="col-xs-12 col-md-8">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
Sure, for BS2:
<div class="row-fluid">
<div class="span6"><img src="yourimage"/></div>
<div class="span6"><img src="yourimage"/></div>
</div>
For BS3:
<div class="row">
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
</div>
EDIT: 01/03/2017
For BS4 (w/ FLEXBOX):
<div class="row">
<div class="col"><img src="yourimage"/></div>
<div class="col"><img src="yourimage"/></div>
</div>
Another solution is to float the images to the left:
<img class="pull-left" src="yourimage"/>
<img class="pull-left" src="yourimage"/>
It should be something like that
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-4 col-md-4">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
</div>
</div>