i have 3 div. In PC, i want to show it same the picture. But when responsive, i want to show with order 1 -> 2 -> 3. How can i do it, please me
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>1
</div>
</div>
<div class="portlet-body">
</div>
</div>
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>3
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet blue-hoki box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>2</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
</div>
Use bootstrap classes properly.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>1
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet blue-hoki box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>2</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>3
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
</div>
Related
I'm using bootstrap 3, the text is not perfectly aligned under a circular image, this is more obvious on different screens and in bootstrap modals and in different languages, I don't want to start adding margin-left because if I do that, I'll be faulty on some screen. Is there a better way?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>
The easy fix to your code is just to add text-center class to all col-xs-* classes. That will center inner images and text inside the col-xs-* wrappers. Note I have added some background color to help visualize the effect.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>
You can add a custom class .center to your outermost .container div. This will align the image and text to center using text-align: center;.
.center {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container center">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>
You could use only one row and then center the image and the text.
<div class="col-xs-3">
<div class="row text-center">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
<br>
<span class="country text-center"> Arabic </span>
</div>
</div>
Update: you can still use the columns... I've added them to the short version of your example
Flexbox
CSS
display : flex;
justify-content : center;
align-items : center
I have three cols. The middle one contains a decimal number which could be in this formats:
XX.XX km
XXX.XX km
XXXX.XX km
So there could be two to four numbers before the dot and there are always two numbers after the dot.
My problem is if the number is more then two numbers befor the dot the unitary after the decimal number shifts. Then it is not in the alignment with the one under it.
This screenshot shows what I mean.
Is it possible to fix the middle col width so the unitary alignment is correct?
Also the unitary could be align-right?
This is the part of my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6">
<div>
<div class="row overall">
<div class="col-sm-12 reducedMarginRight reducedMarginLeft">
<h4 class="font">Overall</h4>
<hr>
</div>
</div>
<div class="row vcenter">
<div class="col-sm-3">
<span class="align-middle">
<i class="glyphicon glyphicon-road glyphSize"></i>
</span>
</div>
<div class="col-sm-5">
<div class="values font align-middle" id="overall_distance">
</div>
</div>
<div class="col-sm-4">
<div class="values font text-right" id="distanceFormat">
km
</div>
</div>
</div>
<div class="row vcenter">
<div class="col-sm-3">
<span>
<i class="glyphicon glyphicon-time glyphSize"></i>
</span>
</div>
<div class="col-sm-5">
<div class="values font" id="overall_time">
</div>
</div>
<div class="col-sm-4">
<div class="values font text-right">
h
</div>
</div>
</div>
</div>
</div>
If I understand your question correctly, Just add text-right class in your value column
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6">
<div class="row overall">
<div class="col-xs-12 reducedMarginRight reducedMarginLeft">
<h4 class="font">Overall</h4>
<hr>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-3">
<span class="align-middle">
<i class="glyphicon glyphicon-road glyphSize"></i>
</span>
</div>
<div class="col-xs-5 text-right">
<div class="values font align-middle" id="overall_distance">690.05
</div>
</div>
<div class="col-xs-4">
<div class="values font text-right" id="distanceFormat">
km
</div>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-3">
<span>
<i class="glyphicon glyphicon-time glyphSize"></i>
</span>
</div>
<div class="col-xs-5 text-right">
<div class="values font" id="overall_time">07:20
</div>
</div>
<div class="col-xs-4">
<div class="values font text-right">
h
</div>
</div>
</div>
</div>
</div>
How may I align the items of these differet divs?
I'm trying to align the header of each column to the items of the divs below, could you please help me to aligns these?
row-header-course with course-name
row-header-progress with course-progress
row-header-remaining with course-remaining
row-header-timestamp with course-timestamp
All aligned left.
Here is my code:
<div class="row historico">
<div class="row row-header col-md-12">
<div class="row-header-course col-md-4">Curso</div>
<div class="row-header-progress col-md-2">Progresso</div>
<div class="row-header-remaining col-md-2">Faltam</div>
<div class="row-header-timestamp col-md-2">Visto por último</div>
<div class="row-header-remove col-md-2">Remover</div>
</div>
<div class="row-history col-md-12">
<div class="course-row row">
<div class="course-name col-md-4">
<i class="fa fa-caret-right" aria-hidden="true"></i>
Curso Teste 4
</div>
<div class="course-progress col-md-2">
<div class="course-progress-bar-wrapper col-md-8">
<div class="course-progress-bar" style="width: 100%;"> </div>
</div>
<div class="course-progress-percent col-md-4">100%</div>
</div>
<div class="course-remaining col-md-2">Completo</div>
<div class="course-timestamp col-md-2">20 horas atrás</div>
<div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div> <!-- .course-row -->
<div class="unit-row">
<div class="row single-unit">
<div class="unit-name col-md-4">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
Curso Teste 4 - Unidade 2
</div>
<div class="unit-nbsp col-md-4"> </div>
<div class="unit-timestamp col-md-2">20 horas atrás</div>
<div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div> <!-- .unit-row -->
</div> <!-- .row-history -->
</div>
EDIT:
This is how it's now:
This is how I want to be:
Here is the code structure you need to fallow. let me know if this did't help you. I have done for only 2 columns right now
and here is working js fiddel link : https://jsfiddle.net/tdxje0su/1/
<div class="row row-header col-md-12">
<div class="row-header-course col-md-6">
<div class="col-md-12">
Curso
</div>
<div class="course-name col-md-12">
<i class="fa fa-caret-right" aria-hidden="true"></i>
Curso Teste 4
</div>
</div>
<div class="row-header-progress col-md-2">
<div class="col-md-12">
Progresso
</div>
<div class="course-progress col-md-12">
<div class="row">
<div class="course-progress-percent col-md-12">100%</div>
</div>
</div>
</div>
<div class="row-header-remaining col-md-2">
<div class="col-md-12">
Faltam
</div>
<div class="course-remaining col-md-12">Completo</div>
</div>
<div class="row-header-timestamp col-md-2">
<div class="col-md-12">
Visto por último
</div>
<div class="course-timestamp col-md-12">19 horas atrás</div>
</div>
</div>
</div> <!-- .historico -->
Got it with:
.course-progress, .course-remaining, .course-timestamp, .course-remove, .unit-nbsp, .unit-timestamp, .unit-remove {
padding: 0 !important;
}
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.
The problem is that the 3rd row and the 4th don't center!
<!--|--------------------------------------------------------------------------------------------|-->
<div class="container">
<div class="row">
<div class="col-md-12 imagemFundo">
<!--|---------------------------------------ROWS-------------------------------------------------|-->
<div id="1" class="row rowPrincipal ">
<div class="container" >
<div class="col-md-2">
</div>
<div class="col-md-8 colPrincipal2 borderRow">
<!-----------------------------PANEL-------------------------------------|-->
<div class="panel panel-default panelTop">
<div class="panel-heading">Primeiro Título</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Segundo Título</h1>
</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<!-----------------------------PANELEND----------------------------------|-->
</div>
<div class="col-md-2">
</div>
</div>
<!--SEGUNDA ROW-----------------------------------------------------------------|-->
<div id="2" class="1 row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">SEGUNDA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--TERCEIRA ROW-----------------------------------------------------------------|-->
The problem starts here!!!!!I have tried every single thing and nothing works. I got a hint that may be divs not closed well but i can't find any error :/ I'm a beginner so maybe that's the problem.
<div id="3" class=" row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">TERCEIRA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--QUARTA ROW----------------------------------------------------------------|-->
<div id="4" class="row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--FINAL ROW-----------------------------------------------------------------|-->
</div>
<!--|---------------------------------------ROWS END------------------------------------------|-->
</div>
</div>
</div>
Please help me!! I really can't figure it out by myself...
<div id="4" class="row rowSecundario ">
<div class="col-md-8 offset-2 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
</div>