new to Bootstrap and having some issues with nested columns. for som reason they are disproportionate. First pair of nested columns are "compressed" in half but those in the second are proportioned just fine. see below.
<!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.1.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-6" style="background-color:lavender;">.col-sm-6
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
Any help on how to fix the alignment would be really appreciates. if this is just a limitation then i guess a new layout will be in order...
thanks,
Marc
There are couple of mistakes in your code. First is that your text is showing col-xs-6 for the nested columns on the left but you are actually setting them col-xs-6 that's why they were covering half of the width only.
Second one is that you are closing the right div col-xs-4 before including nested div.
Here's is your working code:
<!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.1.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-8" style="background-color:lavender;">.col-sm-8
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm having trouble figuring out why am I getting a constant padding at the bottom of my container in Bootstrap5. I tried using align-items-center in the row to center the content, but that didn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/4b6937b5e3.js" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div class="container-fluid bg-dark text-light">
<section class="row">
<div class="col-md-4 text-center">
<p>lorem</p>
</div>
<div class="col-md-4 text-center">
<p>lorem</p>
</div>
<div class="col-md-4 text-center">
<p>lorem</p>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Here you go...
It's because there's a margin-bottom set to the <p> tag.
Add the following to your CSS:
p {
margin-bottom: 0 !important;
}
See the snippet below.
p {
margin-bottom: 0 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/4b6937b5e3.js" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div class="container-fluid bg-dark text-light">
<section class="row">
<div class="col-md-4 text-center">
<p>lorem</p>
</div>
<div class="col-md-4 text-center">
<p>lorem</p>
</div>
<div class="col-md-4 text-center">
<p>lorem</p>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
How to change columns order on window resize in bootstrap 3 grid?
Here an image what i try to get:
Change bootstrap order on window resize
PROBLEM SOLVED!
CODE:
<div class="row">
<div class="col-lg-2 col-md-6 col-xs-6">Box1
</div>
<div class="col-lg-2 col-lg-push-8 col-md-6 col-xs-6">Box2
</div>
<div class="col-lg-8 col-lg-pull-2 col-md-12 col-xs-12">Box3
</div>
</div>
You can add multiple classes for different window size. use this code in your local html file
<!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.3.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>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-lg-4 col-md-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-lg-4 col-md-6" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-lg-4 col-md-12" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
I am trying to build two rows with Bootstrap 4, the one should be displayed on devices with viewport < tablet and the other > tablet. In other words, once the one is visible, the other is hidden. I am using the native d-- classes from Bootstrap 4, but in the > tablet case they break the columns somehow. I am not sure, if it's bug or just me, but I am stick with this for hours. Here is a simple example that I've made to represent the issue.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-block">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
You need to use d-md-flex class because d-md-block override flex property of bootstrap 4.....check this i have added d-md-flex class
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-flex">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
Here is my html, I am using the SCSS version:
<!doctype html>
<html class="no-js" lang="en" dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is what I get:
UPDATE (clarification):
When I inspect the elements, they don't have a row/column class definition, and they are not centered at all.
What am I doing wrong?
Note: I am using the rtl settings. I checked if it broke things, but it still didn't work.
Do you have an #include foundation-float-classes or #include foundation-flex-grid on your app.scss? Maybe you are using only #include foundation-xy-grid-classes, where there are no .row and .columns anymore, only .grid-x and .cell
I am learning to use bootstrap 3
I have a problem with using push and pull
Normally the rows are centered
but When i use push/pull the row gets aligned left, and go off the left of the screen if the browser is not fullscreen.
why is this
code bellow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Bootstrap 3 Playabout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link rel="stylesheet" href="styles.css">
<script src="bootstrap.js"></script>
<style>
.a
{
background-color:green;
}
.b
{
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4 a col-lg-push-4">One</div>
<div class="col-xs-6 col-md-8 b col-lg-pull-8">Two</div>
</div>
</div>
</body>
You need to switch the push/pull numbers like this:
<div class="col-xs-6 col-md-4 a col-lg-push-8">One</div>
<div class="col-xs-6 col-md-8 b col-lg-pull-4">Two</div>
Working Bootply