I have a web application which uses Bootstrap (2.3.2 - corporate policy, we cannot upgrade to 3.0 without lots of testing across several web applications). We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have an alert message appear as a floating div at the top of the page.
This will be a fixed floating div, that can be shown and hidden using javascript as and when needed. This part works and I can control this div, whenever I need to flash some information to the user or some error takes place.
The layout is like so:
<div id="message">
<div id="inner-message" class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
test error message
</div>
</div>
The styling is below:
#message {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#inner-message {
margin: 0 auto;
}
The #message div behaves all well and good, but when I try and add some padding to the #message div (to try and get some space between the edge of the page and the div i.e. padding: 5px), the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page (hiding part of the 'x' inside the bootstrap alert).
Has anyone experienced this before? It seems like a simple enough issue, so am I overlooking something?
If you want an alert that is fixed to the top and you are using bootstrap navbar navbar-fixed-top the following style class will overlay they alert on top of the nav:
.alert-fixed {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
z-index:9999;
border-radius:0px
}
This worked well for me to provide alerts even when the user is scrolled down in the page.
Just wrap your inner message inside a div on which you apply your padding : http://jsfiddle.net/Ez9C4/
<div id="message">
<div style="padding: 5px;">
<div id="inner-message" class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
test error message
</div>
</div>
</div>
The simplest approach would be to use any of these class utilities that Bootstrap provides:
Bootstrap 5
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
https://getbootstrap.com/docs/5.0/utilities/position/
Bootstrap 4
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<!-- Deprecated classnames -->
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>
https://getbootstrap.com/docs/4.0/utilities/position/
I think the issue is that you need to wrap your div in a container and/or row.
This should achieve a similar look as what you are looking for:
<div class="container">
<div class="row" id="error-container">
<div class="span12">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
test error message
</div>
</div>
</div>
</div>
CSS:
#error-container {
margin-top:10px;
position: fixed;
}
Bootply demo
Others are suggesting a wrapping div but you should be able to do this without adding complexity to your html...
check this out:
#message {
box-sizing: border-box;
padding: 8px;
}
You can use this class : class="sticky-top alert alert-dismissible"
Related
I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.
I know div elements are block level elements. They come one by one in different rows. I found one strange behavior. It is not displaying one by one.
<div id ="contend">
<div style='position:relative'> <div class='serach-box'>
<div class="container">
<p>Live Search</p>
<!--Row with two equal columns-->
<div class="row" >
<div class="col-md-3" >
<div class="demo-content">Location</div>
</div>
<div class="col-md-3" >
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
</div>
</div>
</div></div>
<div>hello</div>
<div>hello</div>
</div>
I added two div elements after completing the serach-box div. I gave serach-box a position: absolute; and its parent div position: relative;.
But why did div text appear above ? Why not below the serach-box div?
Code is below:
http://plnkr.co/edit/ONrHDKuaP9bwmT7MsQhD?p=preview
.serach-box{
width: 90%;
height: 150px;
border: 1px solid;
position:absolute;
left:5%;
}
Because the search box is absolutely positioned, it is taken out of normal flow.
Since it isn't in normal flow, it has no influence over the height of its container.
Since its container has no other content, the container ends up with a height of zero.
The elements following the container are, therefore, not pushed down by the container's height.
your position absolute will cause the text to find its way to the top.
Absolute means it will 'hover' on top of the page.
you can set the position to relative and add some with and height to place the box at the top.
just replace absolute for relative
To the div which is relatively positioned, its taking no height so, both the div's with 'hello' text are displaying there itself.
Give some min-height to the relatively positioned div.
<div style='position:relative;min-height: 32%'>
....
....
</div>
Which will work fine for you.
I have several modals on a website that once I mess around with they load center page when in desktop view but after reopening the projects it will some times load only the left half on the page while the right half is cut off of the page as if it is set to to have the position: right attribute. I have not altered the bootstrap modal section of the css nor the js and am not using anything else besides bootstrap. I created a class to add to the modal to add every since center align attribute possible
.ALmodal{
align-content:center;
align-items: center;
align-self: center;
}
.iframe-container {
padding-bottom: 60%;
padding-top: 30px; height: 0; overflow: hidden;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal.in .modal-dialog {
transform: none; /*translate(0px, 0px);*/
}
<div class="container">
<!-- Trigger the modal with a button -->
<center> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#schd">Open Large Modal</button></center>
<!-- Modal -->
<center><div class="modal fade ALmodal" id="schd" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<object width="100%" height="500" data="/img/Primal-Kickboxing-2014-Schedule.pdf" >
</object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</center>
</div>
here is other modal related css that i have in a separate css file
I would refrain from putting extra classes that interfere with the standard BS classes, especially if they are about spacing like your ALmodal.
I have made a default BS Modal here, see the code. It works, also on mobile. The thing is, the Modal is centred by default by BS. So there is no need to make a class that tells it to centre again. That possibly messed it up. Go with the standard classes and take it from there.
http://www.bootply.com/9LUdALseVe
Also you want to look at the BS Helper Classes. There you see a section Center content blocks, have a look at that to see how you can centre content.
Please don't forget that a Modal on top of a Modal is not supported. See here.
If you must have two modal open at the same time look here. Though I really don't recommend that from a UI or UX point of view. Make your designs easy to understand and to follow. Try basic things and take it from there.
Hope this helps a bit. If I am wrong in any point please do let me know so I can avoid the same mistakes in the future. Thank you.
I am trying to accomplish exactly something like this:
http://www.freshbooks.com/
I have a container with a background and a form inside it. I want this container to resize exactly to the width and the height of the window it is opened in. Also, when resizing, it should resize along the window.
I drew it so I can be more clear. This is how I want it to look like:
Instead, at the moment it looks like:
I know how to do this with jQuery, it's pretty simple, but if I set a fixed height to the container, the "responsiveness" of bootstrap and of the page is completely lost when I shrink it to a smaller size.
I am pretty sure that bootstrap has some build in and ready to use functionality for doing this, but obviously I can't find it.
Also, I am having trouble to center the "Some text and form" components vertically in the gray area.
Your help is appreciated!
There should be no need for jQuery or JavaScript. This can be done using only CSS.
You can use .container-fluid instead of .container to have it span almost the entire width of the window. The columns inside it will have a small gutter of 15px to the left and right though. But as you'll likely add the background-color on the .container-fluid this shouldn't be a problem.
Put all content that should take up the entire height of the window inside the .container-fluid and add a height property to it. Either 100vh, 100% of the view height. If that doesn't work due to browser support (e.g. you need to support IE8) give it a height of 100% and make sure that all its parents (at least html and body) also get a height: 100%.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid height-full bg-dark">
<div class="row">
<div class="col-xs-12">
<h1>Full width and height</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>
If it's only about showing a small form horizontally and vertically centered in the entire width and height of the screen, I suggest not using the .container-fluid but the regular .container. From your screenshots it seems that you don't want the form to take up the entire width of the screen. Surround the .container with a div that has its background-color set.
Create a Bootstrap grid that contains the form (in my example I've used .col-xs-6.col-xs-offset-3 to have a half width column in the center of the screen. Give this column the height: 100vh to make it take up the entire height of the screen. The horizontal centering is now done.
Vertical centering is done by positioning the form absolutely, pushing it down top: 50% of the height of its container (the column has position: relative) and pulling it transform: translateY(-50%) of its own height up. See css-tricks.com/centering-css-complete-guide/ for more information
The 100vh might conflict with your navbar. Take it outside of the regular document flow by either make it fixed by adding .navbar-fixed-top or position it absolutely.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
.vertically-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="bg-dark">
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 height-full">
<form class="vertically-center">
<h1 class="text-center">Some text</h1>
<div class="row">
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>
I have reviewed all of the existing questions / answers, and still cannot get a working solution, so I would appreciate any comments on my particular code below.
I would prefer not to use hard-coded image sizes (pixel counts) in my code, and I am willing to use a combination of Less, CSS, or Javascript in the solution.
The image should be centered vertically and horizontally within the Bootstrap column, and remain centered even when the screen is resized.
My HTML:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel">
Some content
</div>
</div>
<div class="col-md-2">
<img src="images/myimage.png" class="img-responsive center-block">
</div>
<div class="col-md-5">
<div class="panel>
Some content
</div>
</div>
</div>
</div>
</div>
Here's an option using transform:
html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */
http://www.bootply.com/YG8vpg1rIf
You can overcome the vertical align problem by using css Flexbox.
Add the class "vertical_center" to the parent div.
Then add the following css
.vertical_center {
display: flex;
align-items: center;
}
Hope this will solve your problem.
Use following CSS property for making the image vertically centered
img { vertical-align: middle; }
For horizontal alignment use class name text-center of bootstrap along with the other class name of your div if yu have. Like,
<div class="col-md-2 text-center"> ... </div>.
It will make the content of the div horizontally centered.