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.
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>
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>
I want to create a html page with first row which has a sidebar menu and div for showing the KPI metrics. I would like to make this KPI metrics div fixed.
Below this KPI metrics is a div for tables. Now when the user scrolls through the table the KPI metrics div should always be fixed. I would also like to know how to align the KPI metrics div and the table div aligned on the right side. I have figured that I could add position : fixed for the KPI div. But not sure how to align the table div on the right side.
<!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="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>
</head>
<body>
<div class="container-fluid">
<p>KPI DIV TO BE FIXED</p>
<div class="row row-no-gutters">
<div class="col-sm-4" style="background-color:lavender;">SIDEBAR</div>
<div class="col-sm-8" style="background-color:lavenderblush;">KPI DIV</div>
</div>
<br>
<p>TABLE DIV BELOW KPI DIV</p>
<div class="row">
<div class=" offset-md-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
</div>
</div>
</body>
</html>
Here's a start for you:
https://codepen.io/panchroma/pen/zXBVRp
I'm not clear where you need to go from here though. Let me know if you need more help.
The HTML is very close to what you posted, my only changes are on lines 21 and 23 where I modified the classes.
<div class="row row-no-gutters">
<div class=" col-md-offset-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
Good luck!
recently, I have downloaded videos from youtube on learning bootstrap 4 for responsive web design and everything works fine for me when I use
<div class="col-md-6> the md class for the medium screen and lg class for large screen works fine but xl class for the extra small devices and sm class for small devices no matter how I zoom the page and I have downloaded responsive website test extension for chrome but still nothing. this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn BOOTSTRAP CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
# this is the parent class and it should take the entire page width
<div class="col-lg-6 col-md-6 col-sm-12 bg-primary">
<p>this is the primary color</p>
<div class="row">
# and this is the child class and it should take 6 col of it parent class
<div class="col-lg-6 col-md-6 col-sm-6 bg-success">
<p>this is the success color</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
look like I didn't work because I was using Bootstrap 4, when I used bootstrap
3 the code works fine for me
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.