Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
Related
Here's an image of what I would like to change
Currently the page has 2 main columns, a sidebar on the left with some rows and a main body on the right. A 3x9 setup. I want the 1st row on the 1st column to move to the very bottom in a mobile view. I thought about seperating the 1st col into 2 different ones and stack them on top of each other and then just change col order on mobile view. But I have no idea how to achieve that...
How the grid looks in html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="row">
<!-- The row I want to move to the very bottom in a mobile view -->
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-lg-9">
<!-- Content -->
</div>
</div>
</div>
Make 1st row two times:
show one on desktop (using Bootstrap classes d-lg-block d-none) and
show one on mobile (using Bootstrap classes d-lg-none d-block).
See the snippet below.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="row d-lg-block d-none">
<!-- Desktop -->
Show me on desktop
</div>
<div class="row">
Row
</div>
<div class="row">
Row
</div>
<div class="row">
Row
</div>
</div>
<div class="col-lg-9 px-0">
Content
</div>
</div>
<div class="row d-lg-none d-block">
<!-- Mobile -->
Show me on mobile
</div>
</div>
I have a square grid. I would like to make the size of the pictures smaller by specifying measurement, while retaining the 2x2 shape, or 3x3 shape etc. Tried setting the width property but did not work. Currently its too big.
How would I resolve this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6 p-0"><img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn" class="w-100 h-100"></div>
</div>
</div>
Even though pictures are smaller , they should touching edge to edge-
For some reason, this is not working
make images the same size in bootstrap grid
This is one way in CSS, looking for Bootstrap way, using grid-template-columns
CSS:
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 0em;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding:0px;
}
HTML:
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
Another helpful site:
https://webdesign.tutsplus.com/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287
HTML Create an Equal Size Square Grid Picture System
Specify Number of Rows and Columns in Grid
HTML Specify Divider gap measurement in Square Grid Picture
Hopefully this will help you out?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" alt="Fruit" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg" alt="Fruit" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" alt="Book" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg" alt="Book" style="width:100%;height:400px">
</div>
</div>
</div>
all images should be of same size e.g 512*512px.
<div class="row">
<div class="col-md-12 p-0">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"
class="">
<img
src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="margin-left:-4px;">
</div>
</div>
Scenario :
I have the following section which contain a card , when I click the card exapnds and shows the info (card-block) at the same time
Todo :
I want the width and height to increase,
Here is jsfiddle: http://jsfiddle.net/Mwanitete/5bwryt1g/3/
NOTE: it may not work in jsfidle but in my locahost works
HTML :
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
Current Scenario :
Right now t just expand and shows data but am not able to make the width and height increase.
What do I need to do get what I want?
Change Jquery.js order Above bootstrap.js
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
http://jsfiddle.net/5bwryt1g/8/
Using Bootstrap and have row which consist of 4 <div>. I need to column which is more them col-xx-1 and less than col-xx-2. How can I set half of col-xx-2 and rest space pass to next div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
I think you have to create sub columns.
So
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-7"> // Extend the length to combine the two rows
<div class="col-sm-4"> // Gives 1/3 of the 8 length column
THIS ONE IS "COL-SM-1.5ish"
</div>
<div class="col-sm-8"> // Gives 2/3 of the 8 length column.
</div>
</div>
...
I combined the 2 columns together to make it col-sm-7, then did subcolumns within there, that give you more room to work with inside the main column. You can adjust accordingly from there.
Sorry i cant give you a 100% correct answer, i usually just browse for answers, hopefully this helps or guides you in the correct direction.
You can define your own classes on top of bootstrap
Bootstrap uses a 12 column grid. Your total columns need to equal 12. You had 3+2+5+1+1 = 12 originally. Now its 3+1.5+5.5+1+1 = 12
I have converted your original col-sm to col-xs instead, since its easier to read on stackoverflow. The principle is the same
[class*=col]{
box-sizing: border-box;
border: 1px solid black;
}
.col-xs-15,
.col-xs-55 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
#media (min-width: 1px){
.col-xs-15,
.col-xs-55{
float: left;
}
.col-xs-15 {
width: 12.5%;
}
.col-xs-55 {
width: 45.8333333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-2">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-5">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- With changes -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-15">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-55">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
I suggest looking at the bootstrap source code to implement your own classes as well
https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css
Simple by giving additional custom class and add it to your media-query
.custom-width{
width:15% !important;
}
Adjust your width in such a way so that it won't overflow your row
.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
border: 1px solid;
}
#media only screen and (min-width: 768px) {
/* Styles */
.custom-width {
width: 15% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2 custom-width">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
I'm building a screen using Bootstrap and I don't know the correct way to reach the expected result.
Basically, what I need is have resizable items in the screen, when it has only one item, this item fills the entire space and when there are multiple items, resize them equally, like the images below.
The HTML that I have so far:
<body>
<div class="container-fluid nopadding">
<header class="container-fluid header">
<span>MINI RADICAL KART</span>
<section class="floating-buttons-box">
<a class="btn-floating green-gradient play"><img src="assets/imgs/play_button.png" width="12"/></a>
<a class="btn-floating black-gradient add"><img src="assets/imgs/plus_button.png" width="20"/></a>
</section>
</header>
<div class="container-fluid">
<div id="clock" class="col-md-5 timer">
<h2>Kart 01</h2>
<h1 class="time">04:32</h1>
<div class="buttons">
<img src="assets/imgs/pause_button.png" class="stop-button"/>
<img src="assets/imgs/single_play_button.png" class="play-button"/>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Countdown JavaScript -->
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
var fiveSeconds = new Date().getTime() + 5000;
$('#clock').countdown(fiveSeconds, {elapse: true})
.on('update.countdown', function(event) {
$(".time").text(event.strftime('%M:%S'));
if (event.elapsed) {
$(".time").removeClass("green");
$(".time").addClass("red");
} else {
$(".time").removeClass("red");
$(".time").addClass("green");
}
});
$('.stop-button').click(function() {
$('div#clock').countdown('pause');
});
$('.play-button').click(function() {
$('div#clock').countdown('resume');
});
</script>
</body>
Thanks.
here is what you want - u must use display: flex;
You probably want something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mb-4">
<div class="col mx-4 bg-danger">
thing
</div>
<div class="col mx-4 bg-success">
thing
</div>
</div>
<div class="row">
<div class="col mx-4 bg-secondary">
thing
</div>
</div>
</div>
As you can see, every col has the same classes, but on the second row I only have one col, that streches automatically to full size.
You can play around with this, and create what you need!