I have a order of divs in bootstrap:
On normal computers i want:
first second third
But on mobile i want:
third
second
first
I have checked the bootstrap grid system page and came up with this:
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col order-md-1 order-sm-3 order-xs-3">
First,
</div>
<div class="col order-md-2 order-sm-2 order-xs-2">
Second,
</div>
<div class="col order-md-3 order-sm-1 order-xs-1">
Third,
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
On mobile i keeps displaying:
first
second
third
Can anyone tell me what i am doing wrong?
This is all you need to re-order. The -xs- infix has been removed, and you just need the order for the smallest and medium.
https://codeply.com/go/mNZVT7Vpng
<div class="container">
<div class="row">
<div class="col order-md-1 order-3">
First,
</div>
<div class="col order-2">
Second,
</div>
<div class="col order-md-3 order-1">
Third,
</div>
</div>
</div>
A-B-C to C-B-A
Also see: Bootstrap 4 grid - 3 stacked columns on left, 1 on right
Related
For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!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"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
I am trying to fix a bug in this website, so I reproduce the problem in the sandbox below
https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html
So right now the problem is when ever you change the img inside,if the size is different, the layout will extend to different height.
You can see as the image change the layout height will change as well, I tried "height" but this will ruin the responsive feature of it, is there any way to mantain the same height but still be able to be responsive?
<!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" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<section class="py-4 d-flex flex-column align-items-center bg-dark text-white min-height">
<div class="container">
<div class="row">
<div class="col-md-5 d-flex justify-content-end flex-column main-heading">
<h1 class="display-3 pb-3">Hello</h1>
<span class="text-info lead">One two three</span>
</div>
<div class="col-md-7 d-md-flex justify-content-center align-items-center flex-column">
<img src="https://i.imgur.com/l4Zvchl.jpg" class="img-fluid lazyload" alt="Page Wallpaper" />
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can try to add this style="object-fit: cover; width: 100%; height: 300px;" to your img element (you can customize it with class), but your image will be cut off a bit due to fixed height as a trade-off.
Mobile size
Desktop size
https://codesandbox.io/s/restless-fire-bp6vcv?file=/index.html:1095-1141
I'm in my beginning of Web development, and I built a simple HTML web page with bootstrap-4.
I want to display 2 card horizontally so the image card will be in the left to the text card. When the screen is small I want the image to be below the text card. But if the card in the left to the second card it automatically display above it.
My code is like that:
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The horizontal result is:
And the vertical result for small screen is:
I want to display the image in the bottom, below to the text card in small screens, but in the left in wide screens.
Thank you for your help!
Set order class order-1 ,order-2 and order-md-1, order-md-2 for changing position for desktop and mobile
Since Bootstrap 4 is flexbox, it's easy to change the order of
columns. The cols can be ordered from order-1 to order-12,
responsively such as order-md-12 order-2 (last on md, 2nd on xs)
relative to the parent .row, The responsive ordering classes are
order-first, order-last and order-0 - order-12.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5 order-md-1 order-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7 order-md-2 order-1">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have limited experience with Bootstrap 4 but am not sure why my page is acting like this. I have these 2 rows, one of which I want for the title to be above the container with white background. I am trying to make 2 columns, one for a sidebar and one for the content on the right however when I use columns they only stack which can be seen here - http://michaelfroseth.com/clients/notebook-html/subpage.html
I have no idea why? They seem to operate fine outside of the row, but am I not supposed to be using a new row? Any documentation or point in the right direction would be much appreciated!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./css/custom.css?v=2">
<title>Pam's Notebook | V1.0</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-5"><span style="color:#fff;">Pam's Notebook</span> <span style="color:#CCAC23;">V1.0</span></h1>
</div>
</div>
<div class="row">
<div class="login-container col-md-12">
<div class="col-md-4">SIDEBAR</div>
<div class="col-md-8">CONTENT</div>
</div>
</div>
</div>
<!-- ALL OF YOUR SITE CODE HERE -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- ADDITIONAL JS HERE -->
</body>
</html>
You should use row inside the container, not as a wrapper.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./css/custom.css?v=2">
<title>Pam's Notebook | V1.0</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-5"><span style="color:#fff;">Pam's Notebook</span> <span style="color:#CCAC23;">V1.0</span></h1>
</div>
</div>
<div class="login-container col-md-12">
<div class="row">
<div class="col-md-4">SIDEBAR</div>
<div class="col-md-8">CONTENT</div>
</div>
</div>
</div>
<!-- ALL OF YOUR SITE CODE HERE -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- ADDITIONAL JS HERE -->
</body>
</html>
I have an issue with a menu im trying to create. I kinda got the old bootstrap, but this whole flex-thingy is confusing for me. So, i want to have a 80px dark vertical side menu and the rest of the screen should be a "working area". My problem is that the items in the side menu does not have full width (see the borders below) and I cant seem to figure out why not. I am guessing right now, that it has something to do with the flexbox - an item taking up only the space it needs. Im have copied the code from bootstrap 4 website and modified a bit. But that last bit, where I can get full width on the items - that one I am missing.
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
It's not related to your .nav-item, it's because .nav doesn't take full width of its parent. Try updating bootstrap to 4.1 and insert .flex-fill to your nav:
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!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/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column flex-fill">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
In case you don't want to update bootstrap, you can simply add flex: 1 1 auto to .nav style:
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column" style="flex: 1 1 auto">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>