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
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>
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I am using bootstrap
I want to split a row in 2 columns when I display a mobile view
I have the code bellow:
<!DOCTYPE html>
<html>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<title>test mobile</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 ">col-xs-6 col-sm-8</div>
<div class="col-xs-6 col-sm-4 ">col-xs-6 col-sm-4</div>
</div>
</div>
</body>
</html>
it display correctly the md view but in mobile view columns take the full line space instead of taking half the width
Do you know what happens and how to solve it please?
If you are using the latest version of Bootstrap I think they have removed the xs class. Just use col-6 instead of col-xs-6 and you should be fine.
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>
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