I am trying to create a nice fixed bootstrap 4 alert.
My problem is that the alert has unwanted bottom padding when it is not placed inside a container. Since this is fixed and is being auto-centered I do not want it inside a container.
Heres my CSS:
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
JSfiddle example: https://jsfiddle.net/81vhy56o/
How to fix?
If you inspect the element you can see that there is a margin on it not padding. To fix it just add the class mb-0 to the <div class="alert"></div> which will make margin-bottom: 0 !important; and if you don't want any padding then you can add pb-0 to it as well.
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="alert" class="alert alert-warning alert-dismissible mb-0 pb-0">
<button type="button" class="close" data-dismiss="alert">×</button>
Hi! I'm a test alert!
</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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
add your own class named .alert-dismissible .close class and add
padding-bottom:0 to it
.alert-dismissible .close{
padding-bottom: 0;
}
and in #alert id add padding-bottom:0
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding-bottom: 0;
}
Related
my web app has an ng-animate transition applied to it in the style.css:
.ng-enter, .ng-leave {
position: absolute;
top: 8em;
left: -100%;
width: 100%;
transition: left .5s;
}
.ng-enter.ng-enter-active {
left: 0%;
}
.ng-leave {
left: 0%;
}
.ng-leave-active {
transition: left .5s;
left: 100%;
}
Unfortunately, this has resulted in it being applied to my navigation bar as well, which results in it causing a weird glitch where, whenever I log in or out, the links slide across the view for a half a second before appearing in the proper place:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="mainApp" ng-cloak>
<head>
<title></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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia" />
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://tappedout.net/tappedout.js"></script>
<!-- Latest compiled and minified CSS -->
</head>
<body id="background" ng-controller="mainController">
<div class="ourNav no-animate">
<div class="logo">Deckster</div>
<div>
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
</div>
<ul id="links">
<li ng-if="loginStatus !== true">
<div>
<a class="active" ui-sref="home" ui-sref-active="active">Home</a>
</div>
</li>
<li>
<div>
<a class="active" ui-sref="cardSearch" ui-sref-active="active">Card Search</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckBuilder" ui-sref-active="active">Deck Builder</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckCollection" ui-sref-active="active">Deck Collection</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div class="logout">
<a class="active" ng-click="logout()" ui-sref-active="active">Log Out</a>
</div>
</li>
</ul>
</div>
<div ui-view class="view-container" ></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="./dropDownMenu.js"></script>
<script src="./app.js"></script>
<script src="./service.js"></script>
<script src="./controller.js"></script>
<script src="./cardSearchController.js"></script>
<script src="./deckBuilderController.js"></script>
<script src="./deckCollectionController.js"></script>
<script src="./homeController.js"></script>
<script src="./loginSuccessController.js"></script>
<script src="http://tappedout.net/tappedout.js"></script>
</body>
</html>
I've tried to add the class "no-animate" in hopes of having the links not slide around, but it hasn't helped despite being important.
.no-animate {
-webkit-transition: none !important;
transition: none !important;
}
what do I need to do to make my "ourNav" class not be effected by transitions? Note that I'm using bootstrap, so I don't know if that could be causing it.
edit: I don't know if the z-index might make a difference, but the styling has the navigation bar at z-index: 1, so it can drop down as a hamburger menu when viewed on tablet or mobile:
.ourNav {
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5em;
align-items: center;
z-index: 1;
}
You can use :not(.no-animate) in your css to exclude those element wich have no-animate class. Like this:
.ng-leave:not(.no-animate) {
transition: left .5s
}
In this case the .ng-leave.no-animate wont have the transition effect
Edit:
window.onclick = () => {
const elements = document.getElementsByClassName("element");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
element.classList.add("black");
}
}
.element {
background-color: blue;
}
.element:not(.not-me) {
transition: background-color 2s;
}
.element.black {
background-color: black;
}
<div class="element" > me </div>
<div class="element not-me" > not-me </div>
<div class="element" > me </div>
Look what happens on click. The elements with the not-me class don't get a transition. There is no need to use !important, just watch for the specifity. Hope it helps
I have centered my image using CSS
.center-block{
margin-left:auto;
margin-right:auto;
}
when using this code it makes them very weirdly centered. Here is all my code HTML & CSS https://hastebin.com/uzavakecic.xml. Here is the image showing what it does.
To put in basic words I want these two images to be the exact middle of the screen.
NOTE: I use bootstrap V4 so I cant use the bootstrap class center-block its my own.
https://gyazo.com/6b0846f84f5fb064ca4dce5ed701e470
Thank you for reading this, James.
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('../images/backgroundimage.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.fourms {
padding-right: 0px;
margin-left: 0px;
}
.center-block {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portal</title>
<!--Bootstrap4 JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--Font-->
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- FullScreen Video Using HTML5-->
<div class="fullscreen-bg">
<video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
<source src="images/backgroundvideo.webm" type="video/webm">
<source src="images/backgroundvideo.mp4" type="video/mp4">
<source src="images/backgroundvideo.ogv" type="video/ogg">
</video>
</div>
<!--Epic Audio Background Using HTML5-->
<audio autoplay loop id="myaudio">
<source src="audio/epicaudio.mp3" type="audio/mpeg">
</audio>
<div class="row icons">
<!--Fourms Icon-->
<div class="center-block">
<div class="col-xs-4">
<img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;">
</div>
</div>
<div class="center-block">
<div class="col-xs-4">
<img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;">
</div>
</div>
</div>
</div>
<!--JavaScript for lowering Volume in EpicAudio-->
<script>
var audio = document.getElementById("myaudio");
audio.volume = 0.1;
</script>
</body>
</html>
You can just use the .justify-content-center helper class on the .row to center the children.
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('../images/backgroundimage.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.fourms {
padding-right: 0px;
margin-left: 0px;
}
.center-block {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portal</title>
<!--Bootstrap4 JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--Font-->
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- FullScreen Video Using HTML5-->
<div class="fullscreen-bg">
<video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
<source src="images/backgroundvideo.webm" type="video/webm">
<source src="images/backgroundvideo.mp4" type="video/mp4">
<source src="images/backgroundvideo.ogv" type="video/ogg">
</video>
</div>
<!--Epic Audio Background Using HTML5-->
<audio autoplay loop id="myaudio">
<source src="audio/epicaudio.mp3" type="audio/mpeg">
</audio>
<div class="row icons justify-content-center">
<!--Fourms Icon-->
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Fourms" style="width:142px;height:142px;border:0;">
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Fourms" style="width:142px;height:142px;border:0;">
</div>
</div>
<!--JavaScript for lowering Volume in EpicAudio-->
<script>
var audio = document.getElementById("myaudio");
audio.volume = 0.1;
</script>
</body>
</html>
I'm making bootstrap skeleton for a WordPress site on top most header section I had video background which is working fine when I added another section content from that section overlapping to header section
my site looks like
my code looks like
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
body {
font-family: 'Roboto', sans-serif;
}
/* ======================= Header ======================== */
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.78;
}
.header .text-contant {
margin-top: 40%;
}
.header .text-contant h1,
.header .text-contant p{
color: #fff;
}
.header .text-contant h1 {
text-transform: uppercase;
font-family: 'Sansita', sans-serif;
font-weight: bold;
}
.header .text-contant p {
letter-spacing: 1px;
}
.header .text-contant i {
padding-top: 33px;
color: #fff;
}
#media(max-width:992px) {
.header .text-contant {
margin-top: 50%;
}
}
#media(max-width:768px) {
.header .text-contant {
text-align: center;
}
}
#media(max-width:480px) {
.header .text-contant {
margin-top: 80%;
}
}
#media(max-width:320px) {
.header .text-contant {
margin-top: 100%;
}
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Boilerplate</title>
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Sansita:400,700" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================== HEADER ============================= -->
<section class="header">
<video autoplay loop muted poster="/img/pexels-photo-27884.jpg" id="background">
<source src="/vdo/River%20-%206815.mp4" type="video/mp4">
</video>
<div class="container text-contant">
<div class="row">
<div class="col-sm-8">
<h1>My WordPress</h1>
<p>Just Another WordPress Theme</p>
</div>
<div class="col-sm-3 col-sm-offset-1">
<i class="fa fa-chevron-circle-down fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<!-- ===================== MAIN ============================= -->
<section id="article">
<div class="container">
<div class="row">
<div class="col-md-8">
<article class="blog">
<div class="blog-meta-detail">
<i class="fa fa-clock-o" aria-hidden="true"> February 17 2017 </i>
<i class="fa fa-user" aria-hidden="true"> cannelflow</i>
<i class="fa fa-folder" aria-hidden="true"> Music,Tech</i>
<i class="fa fa-tags" aria-hidden="true"> Tag 1,Tag 2</i>
</div>
<div class="blog-title">
<h2>Sample Blog Post 1</h2>
</div>
</article>
</div>
<div class="col-md-4">
<aside class="sidebar"></aside>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
thanks in advance
I would suggest to use a fixed height for the video, using media queries to change the video height as you reduce the windows width (for mobile and tablets websites). Then the best way to position the html over the video is using flexbox. For cropping the video you can user margin-top : <0px;
You code is too complicated and I can not fix it, you should have posted an example of your problem and then we could help.
Can anyone check the code above
I don't know why I can't put boxes in the middle with the directive layout-align="center center"? Thanks.
Code snippet:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
.wrapper {
width: 100%;
height: 100%;
}
.one {
background: tomato;
width: 50px;
height: 50px;
}
.two {
background: green;
width: 50px;
height: 50px;
}
</style>
</head>
<body ng-app="testApp">
<div class="wrapper" layout-align="center center">
<div class="container" layout-gt-xs="row" layout-xs="columnn" flex="none">
<div class="one" flex="initial"></div>
<div class="two" flex="initial"></div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial"]);
</script>
</body>
</html>
Thanks for #ManojKumar's answer, layout-align directive only affects immediate children.
After reading through Center a Font Awesome icon over the image on hover and it's corresponding answers, I'm still having trouble replicating this answer with an Ionic Icon.
Code I'm using is as follows:
<div class="video-thumbnail">
<img src="image here" />
<i class="icon ion-play"></i>
</div>
CSS I'm using is:
.video-thumbnail {
position: relative;
margin: 0 auto;
display: inline-block;
}
.video-thumbnail img {
position: absolute;
}
.video-thumbnail i {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I've got it to go on top of each other but can't seem to find the middle point. Looking to center horizontally and vertically. I'm not looking for any hover states just a blatant icon over image.
Thanks!
For horizontal and vertical centering,
You need to remove position: absolute for the image since it takes
it out of the flow.
Calculate the top and left values using calc(), you will need to subtract the dimension values of the icon from 50%.
angular.module('app', ['ionic']);
.video-thumbnail {
position: relative;
display: inline-block;
}
.video-thumbnail img {
width: 100px;
height: 100px;
}
.video-thumbnail i {
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 5px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="video-thumbnail">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2KjQI_sGhxCm5CTyQPuCACLuLEyvup4eDNVowMzdHiiPLShdL3ggiA7QC" />
<i class="icon ion-play"></i>
</div>
</ion-content>
</ion-pane>
</body>