I have an alert div and a row inside a container, when I close the alert the row content moves up. I want to make the alert appear over the row content so that when I close it nothing happens.
<div class="container">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>TEXT</strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row align-items-center">
CONTENT
</div>
</div>
thanks in advance
Muhammad's suggestion could be made to work if you set the container to position: relative;
.container {position: relative;}
.alert {position: absolute; top: 0;}
<!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>
<nav class="navbar">
<div class="navbar-brand">Brand</div>
</nav>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success alert-dismissable">
×
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
</div>
</body>
</html>
You could try using jQuery to change the visibility of the alert rather than it's display:
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault()
$(this).css('visibility', 'hidden')
})
Here is a demo:
https://www.bootply.com/TazOvYZQyC
One way of doing this is to add the following CSS:
position:absolute !important;
top:0px;
to the alert div.
Here is a sample 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.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">
<h2>Alerts</h2>
<div class="alert alert-success alert-dismissable" style="position: absolute; top:0px;">
×
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
</div>
</body>
</html>
Related
I want a specific display depending on whether I have an image or not in a row bootstrap.
I want when I have an image and text content, I can have in the same row for a column size 4 my image and right my text content with a column size of 8
enter image description here
According to the display below and if the image is not there I can have instead of the image the content.
<div class="container ">
<div class="row ">
<div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-md-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
How can I do it
use align-items-center as class in parent div. here is the snippet
<!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-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
use align-items-center as class in parent div. here is the snippet
and if you want to remove image then you have to add style of some specific height so it will align all items in center according to the height.
<!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-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
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>
Trying to position the button that triggers the bootstrap collapse in a fixed position so it is always visible when the user is scrolling on the page. However the position of the content that is shown when the button is clicked does not change with the button position. How do I show the collapsed content in the same default collapse format after changing the button position?
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<button style="position: fixed; top: 50% ;left: 50%", class="btn btn-primary" type="button" data-toggle="collapse" data-target="#butcollapse"
aria-expanded="false" aria-controls="butcollapse">
+
</button>
<div class="collapse" id="butcollapse">
<div class="card card-body">
hello
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<button style="position: fixed; top: 50% ;left: 50%", class="btn btn-primary" type="button" data-toggle="collapse" data-target="#butcollapse"
aria-expanded="false" aria-controls="butcollapse">
+
</button>
<div style="position: fixed; top: 75% ;left: 50%;" class="collapse" id="butcollapse">
<div class="card card-body">
hello
</div>
</div>
I'm trying to change the width of the div elements during responsiveness.
so when I reduce the screen width to around 600px the div elements should increase their width to 50%.
Now I noticed no breakpoint for w-* class, and was wondering is there any way to do it??
also I'm allowed to only use bootstrap and avoid as much as possible to add my own CSS.
can any one help??
here is the code snippet
<!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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex>div
{
height:200px;
background-color:black;
margin-left:10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body d-flex align-items-center flex-wrap">
<div class="flex-grow-1">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
</div>
</div>
</div>
</body>
</html>
you can do it with pinch of jquery code like below,
if(jQuery(window).width() < 601px){
jQuery('.your-div-class').addClass('w-50');
}
else {
jQuery('.your-div-class').removeClass('w-50');
}
Please make sure you have included jquery in your page as well.
Bootstrap's break points are Small 540px and Medium 720px. So you could try the following. This example defaults to 5 blocks per row, and then 2 blocks per row on a small break point.:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex {
height: 200px;
background-color: black;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body row">
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to get an alert to disappear when the "x" button is clicked, but there seems to be something missing that's keeping it from working, not sure what it is.
<div class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
You've done it!
</div>
for dismissible to work, you need to include jQuery and bootstrap.js in your document.
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
You've done it!
</div>
<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>
</body>
</html>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="margin-top: 50px" class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
You've done it!
</div>