Bulma CSS framework
I am using bulma's grid system to make column blocks. For example I have 4 div's next to eachother and each div has column is-3 is-offset-0 as its class. My question is how can I show these div's on tablet 2x2 and on mobile 1x1? Mobile is working but I can't get it working on tablet.
In the picture you see 4 columns next to eachother, that is what I want on desktop but on tablet only I want them to show like 2 columns per row.
Does anyone know how to do this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css"
/>
</head>
<body>
<style>
.column p {
background-color: coral;
}
</style>
<div class="container">
<div class="columns is-multiline">
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>First column</p>
</div>
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>Second column</p>
</div>
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>Third column</p>
</div>
<div
class="column is-3 is-3-fullhd is-3-desktop is-6-tablet is-12-mobile"
>
<p>Fourth column</p>
</div>
</div>
</div>
</body>
</html>
Related
i want to make a website with a gallery block but i can't get it working. I only want to use Bootstrap with this and my custom css just for the finishing touches. So i want 2 squares next to eachother, left square needs to be 2 columns and 2 rows and the right square needs to be as big as the left square. Like the photo
I tried different approaches with flex box etc, i cant get it working as it should be
Screenshot of what i want
Try this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
rel="stylesheet"
/>
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example bd-example-row">
<!-- Example Code -->
<div class="container text-center">
<div class="row">
<div class="col">
<div class="col">Cell 1</div>
<br />
<div class="col">Cell 2</div>
</div>
<div class="col">
<div class="col">Cell 3</div>
<br />
<div class="col">Cell 4</div>
</div>
<div class="col"></div>
</div>
</div>
<!-- End Example Code -->
</body>
</html>
I am making a row with 2 columns with Bootstrap 3. I am programming for a webshop there is having around 100.000 products, so it is not converted to BS4 yet. Therefore I am forced to use BS3. The left column is gonna contain a background color and some text, while the right column will be an image.
This is how the row is looking like now:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="wrapper">
<div class="row">
<div class="col-sm-3" style="background-color:pink;">
<h3>Headline</h3>
<p>Some text here</p>
<button type="button" class="btn btn-info">Button</button>
</div>
<div class="col-sm-9">
<img src="http://placehold.it/900x200">
</div>
</div>
</div>
This is how my end result should be:
As said in comments your code is working, since you are using bootstrap 3 you may want to use img-responsive class for your image, because it has a large width.
By the way I have changed your col-sm-3 and col-sm-9 classes to xs ones, you may want to consider changing them to md or sm for your case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous"
/>
<title>Static Template</title>
<style>
.d-flex {
display: flex;
}
.image-container {
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
</body>
<!-- Latest compiled and minified CSS -->
<div class="container">
<div class="wrapper">
<div class="row d-flex">
<div class="col-xs-3" style="background-color:pink;">
<h3>Headline</h3>
<p>Some text here</p>
<button type="button" class="btn btn-info">Button</button>
</div>
<div
class="col-xs-9 image-container"
style="background-image: url(https://picsum.photos/id/287/900/200)"
></div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
</html>
-Edit: after taking a deeper look on what you really want to achieve (same height for both columns) I updated my question with the follow:
Adding a class called d-flex to set a display: flex on any container you need, once a container has a display: flex; value its children will stretch by default.
You may also need to update your image to support a height: 100% which I highly recommend not to, cause it will make the image look ugly. Instead take advantage of background-size: cover;.
Some good resources on how to make your image fit in nicely:
https://css-tricks.com/almanac/properties/o/object-fit/
https://css-tricks.com/almanac/properties/b/background-size/
I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen.
Currently my MAIN content is wrapped in col-xl-3, I want the ASIDE to also use col-xl-3, but I want it to run the height of the page, not just the height of the row it is in, as it is currently pushing the height of the row out...
As you can see from the image, my aside is pushing the top row higher than the bottom...
All I have done code wise is this;
section.body article, section.body aside { float: left; clear: both; }
Any help would be greatly appreciated.
I used "col-sm" but the principle is still the same. It's all about the nesting.
View in full page to see columns.
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
</div>
</div>
</div>
</body>
</html>
Im trying to achieve the following. Mockup: http://pasteboard.co/iNg55T4.png
The code below looks good on mobile (xs) but on desktop (md or greater) the positioning is wrong. I have tried all sorts of push/pull but to no avail. Im using w3schools website to play around with their editor and have the code below.
And using this link and code at w3 schools
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_stacked_to_hor&stacked=h
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6" style="background-color:lavenderblush;">
<p>1 this is div 1</p>
</div>
<div class="col-xs-6 col-md-6" style="background-color:lavender;">
<p>2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div 2 2 this is div</p>
</div>
<div class="col-xs-6 col-md-6" style="background-color:lavenderblush;">
<p>3 this is div 3</p>
</div>
<div class="col-xs-6 col-md-6" style="background-color:lavenderblush;">
<p>4 this is div 4</p>
</div>
</div>
</div>
</body>
</html>
If anyone could help answer this puzzle it would be greatly appreciated.
I have two columns in a row. But the two columns are being stacked vertically.
Here's my code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="small-2 columns"><p>2 columns</p>
</div>
<div class="small-4 columns"><p>10 columns</p>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
The 2 column div and the 4 column div should appear side by side but are instead stacked on below the other.
What your telling your code is to set a column of 2 (blocks) width and then 4 (blocks) width, which adds up to 6.
Whereas you need to have the whole row (its parts thereof) add up to 12. There are various number combinations you could use to get to 12, but for simplicity we'll use your commented values.
<div class="row">
<div class="small-2 columns"><p>2 columns</p> </div>
<div class="small-10 columns"><p>10 columns</p> </div>
</div>
Or we can use your ratio sizes to give the look of what I think you were trying to achieve.
<div class="row">
<div class="small-4 columns"><p>1/3 width in columns</p> </div>
<div class="small-8 columns"><p>2/3 with columns</p> </div>
</div>
I hope this helps you with your question.