I attach a snipped below, as you can see, the 2 buttons show a different height, I would like them to have the same height when I change the page size, and be on the same line.
I don't want to just say height: 100px, because when I open it on a phone it would deform.
<!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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.dropbtn {
background-color: #264653;
border: none;
color: white;
padding: 0.1%;
text-align: center;
cursor: pointer;
width: 100%;
flex-grow: 1;
display: block;
}
.dropdown {
position: relative;
display: block;
width: 100%;
}
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div style="width: 100%; height: 100%;" class="container-fluid">
<div class="dropdown" style="width: 50%; float:left; height: 100%;">
<button class="dropbtn" style="width: 100%; height:100%;"><h2>File: 2019717_1828_FMCI_107.txt Device 107 </h2> </button>
</div>
<div class="dropdown" style="width: 50%; float:right; height: 100%;">
<button class="dropbtn" style="height: 100%;"><h2> Channel:0 <i class="fa fa-caret-down"></i></h2> </button></div>
</body>
Thank you very much for your help.
you can use bootstrap container for it:
<!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">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% " >Primary</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% "> Primary</button>
</div>
</div>
</div>
<div style="width: 100%; height: 100%;" class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check: https://jsfiddle.net/pk78ntze/
Related
i am using bootstrap here and i was trying to make a nav bar with some content and there is a link to a part of the site but the text i am linking to is being covered by the top nav bar
<!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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>website with navbar</title>
</head>
<body>
<div class="container sticky-top" style="background-color: #f1f1f1; top: 0;">
<h1>website</h1>
<ul class="nav nav-tabs">
<il class="nav-item">first lecture</il>
<il class="nav-item"><b>second lecture</b></il>
<il class="nav-item">third lecture</il>
<il class="nav-item">fourth lecture</il>
</ul>
</div>
<div class="container" style="margin-top: 30px;">
موقع coder shiyar<br>
email<br>
telephone
<h1 style="height: 700px; background-color: red;" id="h11">
first part
</h1>
<h1 style="height: 700px;background-color: rgb(0, 255, 42);" id="h1">
second part
</h1>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Add position: relative; to the style of the first <div> with class of .container (The one on top of <h1>website</h1>),
<!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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>website with navbar</title>
</head>
<body>
<div class="container sticky-top" style="background-color: #f1f1f1; top: 0; position: relative;">
<h1>website</h1>
<ul class="nav nav-tabs">
<il class="nav-item">first lecture</il>
<il class="nav-item"><b>second lecture</b></il>
<il class="nav-item">third lecture</il>
<il class="nav-item">fourth lecture</il>
</ul>
</div>
<div class="container" style="margin-top: 30px;">
موقع coder shiyar<br>
email<br>
telephone
<h1 style="height: 700px; background-color: red;" id="h11">
first part
</h1>
<h1 style="height: 700px;background-color: rgb(0, 255, 42);" id="h1">
second part
</h1>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Hello I am unable to align the button with the above text box on right side. There is no effect to set the margin of the fieldset.
Below is my code.
<!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.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.container{
max-width:520px;
max-height:180px;
background-color:antiquewhite;
}
fieldset{
max-width:518px;
max-height:178px;
padding-right:15px;
padding-left:15px;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class ="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form"
style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;"
>
<fieldset><!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-left:5px;margin-right:5px;margin-top:20px;width:100%;padding-right:5px;padding-left:5px;" >
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div><!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;margin-left:10px;padding-right:15px;width:100%">Get Started</button>
</div><!--End of bottom div-->
</fieldset><!--End of second form fieldset-->
</form>
</body>
</html>
Please fix the problem and tell me when we set the margin of fieldset 10px from right side then it will br the boundary of fieldset of 110px for element? Is it ok or there is any other concept?
try this
<!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.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 520px;
max-height: 180px;
background-color: antiquewhite;
}
fieldset {
max-width: 518px;
max-height: 178px;
padding-right: 15px;
padding-left: 15px;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">
<fieldset>
<!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-top:20px;width:100%;">
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div>
<!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%">Get Started</button>
</div>
<!--End of bottom div-->
</fieldset>
<!--End of second form fieldset-->
</form>
</body>
</html>
I put a background image and I'm using a card at the middle of the page. I've a white bar that come across all the screen and I don't know how to remove it.
Here is a screenshot:
Here is my code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Change your background to be set to the body instead of html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
body{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Add transparent to your body as well
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body style="background-color: transparent">
<div class="container" style="background-color: transparent">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
there is background color in your body tag.
you can set background color to transparent.
body {
background-color: transparent;
}
The issue is caused by this line which is associated with the head tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
Use the below code and the issue will be fixed. The change that I made is, I changed the background property of the body to transparent which was assigned by default by the above tag. Now it works perfectly. Hope it helps.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
body{
background-color: transparent;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
I have a problem with button text. I have customized the width and height of a button and when I resize, its text remains no more in center on some screen sizes in a debugging mode.
Html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container text-center testButton">
TEST
</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
Update
Here is the image where I want html button to replace the button on image
Please have a look I have added the image on which I want to place an html button with same width and height so that it hides the image button.
Here's the code (using your HTML as a basis) for a large button that remains centered on all devices/screens. Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay text-center">
<button routerLink="/test"
class="btn btn-lg btn-success fill-container text-center testButton" style="width: 34%;">
TEST
</button>
</div>
</div>
</div>
</div>
</div>
This should do the trick : Adding class text-center to parent div of the button tag.
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button routerLink="/test" class="btn btn-success">TEST</button>
</div>
</div>
</div>
Also make sure to include Bootdtrap V4 in head tag.
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
Have a look at the this link as well, adding bootstrap to your page: click me
To center the text on button: Use
class="text-center"
You need to Apply "align-center" class on .img-overlay {} not on Button then it will work
I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!
Try this
<!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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>