Experimenting with Bootstrap for a CS50 assignment.
Cannot get three columns to cross page horizontally.
col1 col2 col3
Instead they insist on stacking vertically.
col1
col2
col3
I took the code directly from the W3 grid tutorial for Bootstrap 5 (https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php). On that page, under "Three Equal Columns," "Example", "Tryit Yourself", the code does exactly what I want. In VS Code (downloaded and running locally) there's some impediment unknown to me. Where should I be looking to troubleshoot?
Both environments link, in their html head, to the same version of Bootstrap's stylesheet (bootstrap.min.css) and script (bootstrap.bundle.min.js) via cdn.jsdelivr.net.
In their bodies, both set up a Bootstrap container in which to wrap a row, in which to wrap three columns.
My simple test code:
<main>
<div class="container">
<div class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
</div>
</div>
</main>
I can't find anything wrong with that. Nevertheless Live Preview in VS Code presents three columns stacked.
I've spent two workdays searching for a solution, and none of the fixes in similar posts has worked for me.
Your reference have an error, try with this:
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</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'm having trouble figuring out how to get this correctly.
The situation:
I have a div (header of a card) which has an icon, a title and a span. This should be left aligned. The header can also have tags (spans) which should be right aligned (start from the right). This is easy to get using float right in the tags, the problem is that the order of the tags is wrong. I tried other things and got the order correctly, but if there are a lot of tags, and a second line is needed, it starts from the left, and it needs to start from the right.
Something like this:
Example
I'd recommend using something like bootstrap, so you can create your div in the specific order you want, and have it resize the divs according to screen size using the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
Here is a demo using a col that disappears on small screen sizes, but appears on larger ones... (4 different sizes (col-lg-12, col-md-12, col-sm-12, col-xs-12), and you can have elements resize according to screen width).
<!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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-md-9 col-sm-12 ml-auto" style="background-color:lavender;">Title</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavenderblush;">Div 1</div>
<div class="col-md-3 col-sm-0 ml-auto"></div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavender;">Div 2</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavenderblush;">Div 3</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavender;">Div 4</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!
I'm reworking an existing module to make it more adaptive. Below is a general mock-up of the current design. This design is used for multiple things, and the goal is that adding or removing modules should be easy.
Right now, we're using a HTML <table> to achieve the lay-out, using col-span and row-span everywhere, but that becomes very messy, very fast (especially if we want to remove a module, or add another module of a different size).
What would a proper way to work around this, be? I'm not looking after a full solution, I'd rather have a small example that I can extend on.
I tried Bootstrap, but some of the modules have fixed sizes, which messes up the GRID-design of Bootstrap. Float has issues with the vertical stacking, ...
Code snippet of how it's created right now:
<table>
<tbody>
<tr>
<td colspan="4" rowspan="2">module</td>
<td>module</td>
<td colspan="3" rowspan="2">module</td>
</tr>
<tr><td>module</td></tr>
</tbody>
</table>
Customize grid according to your needs
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:black;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:green;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:blue;">.col-sm-3</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:red;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:pink;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:yellow;">.col-sm-3</div>
</div>
</div>
</body>
</html>
Here is my bootstrap HTML code snippet. It is working fine in all browsers except in IE-11 . I am getting a horizontal scrollbar also the last 2 div col-xs-6 inside a row are coming in 2 different rows not in a single row.
<!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="css/bootstrap.min.css">
<script src="javascript/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;"> direct inside a row
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
<div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
</div>
</div>
</body>
</html>
Thanks for the help in advance.
You can try to specify the compatibility mode in the document header with:
<meta http-equiv="X-UA-Compatible" content="IE=11" />
Take a look to this link for more info:
IE legacy document modes