How can I move my Bootstrap card to the top-right of the screen?
This is my current html code (a snippet of it):
<div class="card-text" style="max-width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{c.Name}} {{c.Surname}}</h5>
<p class="card-text">{{ c.role }}</p>
</div>
</div>
I have looked through the documentation of bootstrap and tried almost everything. Anyone an idea?
Here you go...
You have to wrap your content with a wrapper and add this to your CSS:
#wrapper {
position: absolute;
top: 0;
right: 0;
}
See the snippet below.
#wrapper {
position: absolute;
top: 0;
right: 0;
}
<!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'>
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div id='wrapper'>
<div class='card-text' style='max-width: 18rem;'>
<div class='card-body'>
<h5 class='card-title'>{{c.Name}} {{c.Surname}}</h5>
<p class='card-text'>{{ c.role }}</p>
</div>
</div>
</div>
</body>
</html>
You can move it by putting it in a wrapper. If you don't want to add it to a CSS you can just place it within style tags in the HTML head.
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
#wrapper {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id='wrapper'>
<div class="card" style="width: 18rem;">
<div class='card-text' style='max-width: 18rem;'>
<img src="..." class="card-img-top" alt="...">
<div class='card-body'>
<h5 class='card-title'>{{c.Name}} {{c.Surname}}</h5>
<p class='card-text'>{{ c.role }}</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed last month.
Please take a look at the demo code. When you scroll to the bottom, the stick to top element is always at the top, but the stick to bottom element does not stick to the bottom at all. Is there anything wrong?
<!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.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger">
<div class="col bg-warning" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
Thank you.
I recommend paying attention to this answer to a similar problem. In your case, accordingly, you can try to make the parent element as flex (.d-flex in Bootstrap), and for the stick element add margin-top: auto (.mt-auto in Bootstrap).
A modified example is below:
<!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.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger d-flex">
<div class="col bg-warning mt-auto" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
I am using the container-lg class of Bootstrap, and I am experiencing the current situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.
This is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="container-lg py-5">
<div class="row" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But, as you can notice, this is not my expected behavior, because it affects to the right container.
Any ideas?
Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="containers-container position-relative">
<div class="container-fluid-lg">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
</div>
<div class="col-md-6" style="background-color: red;">
</div>
</div>
</div>
<div class="container-lg position-absolute" style="left:0; right:0; top:0;">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6">
<h2>Right</h2>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I have a simple issue in my CSS code I want to create a Vertical line after my heading using bootstrap utilities but I faced an issue.
Here is a live example of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 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" />
<title>Bootstrap</title>
</head>
<body class="bg-dark text-white">
<div class="container mt-5">
<h3 class="position-relative d-inline-block fw-bold">
My Title Here
<hr style="height: 2px;" class="position-absolute top-50 start-100 translate-middle-y opacity-100 w-100 my-0 ms-4 bg-primary" />
</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Expected Result:
thanks!
Close <h3> before the hr, and add display: inline-block; to hr. Remove the top and bottom margin set at 0 (my-0), as well as left: 100%; (start-100), and translate-middle-y. Your position absolute along with the margin-left and w-100 is making the hr appear to overflow. You can easily fix this by using w-75.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 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" />
<title>Bootstrap</title>
</head>
<body class="bg-dark text-white">
<div class="container mt-5">
<h3 class="position-relative d-inline-block fw-bold">My Title Here</h3>
<hr style="height: 3px;" class="position-absolute opacity-100 w-75 ms-4 bg-primary d-inline-block">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Simple flex will do what you need
<div style="display: flex;align-items: center;">
<h3>
My Title Here
</h3>
<hr style="height: 2px;flex: 1;margin-left: 8px;">
</div>
What am I trying to achieve is to have a blob background behind the orange. The most important thing is that whenever window is resized that the blob will always stay directly behind the orange and not move to left or right. Could anybody help me achieve that? I would appreciate that very much.
<!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.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-6" style="position:relative;left:0;top:0">
<img src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
style="width:100%;">
<img src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00" style="position:absolute;">
</div>
</div>
</div>
</body>
</html>
You should position your element with left: 0; top: 0; (putting it on relative element has no effect):
.images {
position: relative;
}
.images .bottom-image {
width: 100%;
position: relative;
z-index: 5;
opacity: .9
}
.images .top-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .9;
z-index: 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-xs-6 images">
<img class="bottom-image" src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"/>
<img class="top-image" src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00"/>
</div>
</div>
</div>
You can insert the blob image as background-image property of the div.
You can read more about it on https://www.w3schools.com/cssref/pr_background-image.asp
Note: Here orange has white background, so cant see clearly, you can check it with some transparent background image.
<!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.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hello Everyone</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-6">
<h3>Column 1</h3>
<p>I would like to place the blob directly behind the orange</p>
<p>And then block the movement so whenever window is resized all is in the same place</p>
</div>
<div class="col-sm-6 col-6" style="position:relative;left:0;top:0; background-image: url('https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00');">
<img src="https://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
style="width:100%;">
</div>
</div>
</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