how to make two buttons in one line using the bootstrap in the mobile display ? i use this code, but in the mobile view it displays 2 line.
<div class="row" style="margin-top:50px">
<div class="col-md-12 col-centered">
<div class="col-md-3"></div>
<div class="col-md-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Izin</h3>
</div>
<div class="col-md-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Cuti</h3>
</div>
<div class="col-md-3"></div>
</div>
</div>
You have to add to your button divs the classes: col-xs-3 aswell to adjust it on mobile. On tablet views its col-sm-3
Check this Fiddle
For a full reference to breakpoints in bootstrap check:
Bootstrap Grid
You have to use the class col-sm-* in order to target small devices
Edit:
<div class="row" style="margin-top:50px">
<div class="col-md-12 col-sm-12 col-centered">
<div class="col-md-3 hidden-sm"></div>
<div class="col-md-3 col-sm-6 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Izin</h3>
</div>
<div class="col-md-3 col-sm-6 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Cuti</h3>
</div>
<div class="col-md-3 hidden-sm"></div>
</div>
</div>
I edited wlalele's answer a little. The changes required here is adding extra class(col-xs-3) for smaller mobile device screens.
<div class="row" style="margin-top:50px">
<div class="col-md-12 col-sm-12 col-centered">
<div class="col-md-3 hidden-sm col-xs-3"></div>
<div class="col-md-3 col-sm-6 col-xs-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Izin</h3>
</div>
<div class="col-md-3 col-sm-6 col-xs-3 text-center">
<i class="fa fa-file-text-o"></i><br/>
<h3>Ajukan Cuti</h3>
</div>
<div class="col-md-3 hidden-sm col-xs-3"></div>
</div>
</div>
Related
I was wondering if there was a way to make a row here hover? I want to point out I am not using a table to create this, but using the grid system in Bootstrap 4. Is it even possible? Everything I have researched points to that you need to create a table in order for this to happen.
<div class="row">
<div class="report-card-i report-card-i-height">
<h3 class="m-l-35 p-t-25 p-b-10">Compliance</h3>
<div class="fa-orange m-t-10 m-b-15 m-l-80">
<div class="row">
<div class="col-sm-1 col-xs-1 text-center">
<i class="fa fa-star m-r-15 text-center" style="font-weight: bold">Adjustment</i>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>21,922</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$0.00</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$304,012.23</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$0.00</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$0.00</p>
</div>
<div class="col-sm-1 col-xs-1 text-center">
<i class="fa fa-angle-right text-center" style="font-weight: bold"></i>
</div>
</div>
</div>
</div>
.mydiv div:hover{background-color:gray;}
<div class="row">
<div class="report-card-i report-card-i-height">
<h3 class="m-l-35 p-t-25 p-b-10">Compliance</h3>
<div class="fa-orange m-t-10 m-b-15 m-l-80">
<div class="row mydiv">
<div class="col-sm-1 col-xs-1 text-center">
<i class="fa fa-star m-r-15 text-center" style="font-weight: bold">Adjustment</i>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>21,922</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$0.00</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$304,012.23</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$0.00</p>
</div>
<div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
<p>$0.00</p>
</div>
<div class="col-sm-1 col-xs-1 text-center">
<i class="fa fa-angle-right text-center" style="font-weight: bold"></i>
</div>
</div>
</div>
</div>
I would change
<div class="fa-orange m-t-10 m-b-15 m-l-80">
<div class="row">
to
<div class="fa-orange m-t-10 m-b-15 m-l-80">
<div class="row highlight">
so that the following css selector only targets rows with the .highlight class:
.row.highlight:hover > * {
background-color: #123456;
}
I have made a card using bootstrap. The columns work fine in all the devices. But they completely change in any ios devices. Screenshot attached.
http://projecttesting.tk/sfl/test.html
is my card on test server.
Fiddle: https://jsfiddle.net/Lhjm8ztn/
<section class="card__list row">
<div class="card__box col-md-12 col-sm-12">
<div class="card">
<div class="card__content">
<div></div>
<div class="ribbon"><span>Sponsored</span></div>
<div class="row card__bottom2">
<div class="col-6 col-sm-4 col-md-8 contest">
<img src="index.png" width="25px" height="25px"> <span class="card__title">MyTeam11</span>
<div class="date2">
<span class="time"> (2 Minutes Ago) </span>
</div>
</div>
<div class="col-3 col-sm-4 col-md-2 center3 card__price">
<span class="card__title">66%</span>
<div class="date">
Overlay
</div>
</div>
<div class="col-3 col-sm-4 col-md-2 center3 card__price">
<span class="card__title">25%</span>
<div class="date">
Margin
</div>
</div>
</div>
<div class="row card__bottom">
<div class="col-6 col-sm-4 col-md-4 col-lg-2 left options">
<span class="date weight">
1.6 Million Monster
</span>
<div class="date2">
43.6 % Overlay
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center card__price">
<span class="date weight"> ₹ 1600000</span>
<div class="date2">
Prizepool
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 right left2 card__price">
<span class="date weight"> 55555</span>
<div class="date2">
Max Entries
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 left center2 card__price">
<span class="date weight"> ₹ 35</span>
<div class="date2">
Entry Fee
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center left2 card__price">
<progress id="pb0" value="620" max="1760"></progress>
<div class="date2">
620/1760 Joined
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center2 right card__price">
<div class="date2">
<button type="button" class="btn btncs btn-primary">Join Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I have tried to change the display property but it was not helpful.
add below code at the end of your css code i hope this should work in ios all sizes
#media(min-width:320px) and (max-width:1024px){
.left2 {
text-align: left !important;
}
.card__price {
text-align: right !important;
}
.left2 {
text-align: left !important;
}
}
Currently I'm working on a e-commerce section, so there is gonna be an aside that contains the filters and a "main" that must contains 6 items inside of individual cards. The problem is that when it is being displayed on mobile screens, the aside is removed (done) and the main should use all the grid of the screen and the individual cards half of that section (divided in 2 per row).
The problem is that I don't know how to do this without modify that much the classes of the cards, because on bigger screens (like iPads or similar) the content is already responsive.
I have already tried using a different set of combinations of grid classes in the columns as I show in the code below
<div class="row mr-5">
<div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
// Here goes the aside that I already hidde with media queries
</div>
<div class="col-8 col-lg-8 col-md-7 col-sm-12" id="content-categoria">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="#" class="custom-card">
<div class="card categoria-image">
<img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
<div class="card-body pl-0">
<h1>Nombre Producto</h1>
<small>Ambiente</small>
</div>
</div>
</a>
</div>
// Here goes 2 more columns like the one above
</div>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="#" class="custom-card">
<div class="card categoria-image">
<img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
<div class="card-body pl-0">
<h1>Nombre Producto</h1>
<small>Ambiente</small>
</div>
</div>
</a>
</div>
// Here goes 2 more columns like the one above
</div>
</div>
</div>
</div>
The result must be as shown in the next picture where I draw a line that must be the other product card.
https://prnt.sc/nyj06y
Here you can check the currently state of the page: https://demos.posicionart.com/silleri/categoria.php
There is too much mistake in your code, for achieve your goal I made some changes.
These is the link where you see differences https://www.diffchecker.com/gVGBN0OY
<div class="row mr-md-5">
<div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
// Here goes the aside that I already hidde with media queries
</div>
<div class="col-12 col-md-7 col-lg-8" id="content-categoria">
<div class="container">
<div class="row">
<div class="col-6 col-sm-12 col-lg-4">
<a href="#" class="custom-card">
<div class="card categoria-image">
<img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
<div class="card-body pl-0">
<h1>Nombre Producto</h1>
<small>Ambiente</small>
</div>
</div>
</a>
</div>
// Here goes 2 more columns like the one above
</div>
<div class="row">
<div class="col-6 col-sm-12 col-lg-4">
<a href="#" class="custom-card">
<div class="card categoria-image">
<img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
<div class="card-body pl-0">
<h1>Nombre Producto</h1>
<small>Ambiente</small>
</div>
</div>
</a>
</div>
// Here goes 2 more columns like the one above
</div>
</div>
</div>
</div>
If you put this code in your CODE, it definitely works
With this code when the width of the container is less than 792px the content of the div with the class 'col-xs-6' disappear.
<div class="cont">
<div class="top">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
how can I display it?
add class name row to top class
<div class="cont">
<div class="top row">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
I am using bootstrap list-group to display links to itunes, amazon and google play. Each link is its own list-group-item. I would like for all of these items to be centered inline with one another. How do I do this?
<!-- Download badges -->
<div class="container-fluid">
<div class="row">
<div class="list-group">
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/cplq6c" class="list-group-item" target="_blank">
<i class="fa fa-apple fa-2x" aria-hidden="true"></i>itunes</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/1qcfl6" class="list-group-item" target="_blank">
<i class="fa fa-amazon fa-2x" aria-hidden="true"></i>amazon</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/mb95g4" class="list-group-item" target="_blank">
<i class="fa fa-google fa-2x" aria-hidden="true"></i>google play</a>
</div>
</div>
</div>
</div>
To be more clear, I would like to have the list-group centered on the page.
Use the col-lg-offset-* classes. Demo. You need it on your first column.
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2 col-lg-offset-3">
...
</div>
Change
<div class="container-fluid">
to
<div class="container">