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.
Related
i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code
Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"
Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)
Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>
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"
I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>
Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>
I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the HTML:
<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image"
src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300
/addthis_widget.js"></script>
</div>
</div>
</div>
Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.
Here is a JSFIDDLE of the page.
Here is a page that has the most up to date code I am attempting.
try this:
var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);
http://jsfiddle.net/WY9YX/4/
I am not sure the content of your 'im-center', since I add an inline style（text-align:center;） as below, tested it and works fine on ie 8.
<div class="img-center" style="text-align:center;">
<img src="test.jpg" alt="test" />
</div>
Define a fixed width for center div would be OK, if this not requries a fixed width, #Raminson's jquery solution is better. I really want to know if we can implement this with pure css
<div id="top" class="wrap_fullwidth">
<div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
</div>
</div>
</div>
Try to apply margin: 0 auto; CSS rule to the div.