Good evening, I'm a novice at applying styles, well my problem is that I have the following slider, and I want to add opacity to it.
<div class="single-hero-slide bg-img" style="background-image: url(img/slider/slider4.jpg);">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="hero-slides-content">
<h4 data-animation="fadeInUp" data-delay="100ms">All the courses you need</h4>
<h2 data-animation="fadeInUp" data-delay="400ms">Wellcome to our <br>Online University</h2>
Read More
</div>
</div>
</div>
</div>
</div>
I would like you to help me with the css code.
I don't recommend inline styles which is what you have included, as it's not maintainable. To add a css file to your project make a new css file (preferable called main.css and then link to it using <link rel="stylesheet" href="*"> Paste this code in to the header of your html and then change the * to the file location. Next you can reference the slider classes, in your case you would type .container h-100{} and then within the curly braces type opacity: ; and in between : & ; write
any number on a scale of 0 ~ 1. An opacity of 0 will be invisible and an opacity of 1 will be completely visible. Hope this answered your question!
Related
I included the following link in the head section of my html page but the animation is not working:
An animated element I tried this and it is working. Do I need to write animate__animated instead of only animated ?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
I also added bootstrap links in my original code. Bootstrap links are working but not animation. Is there any other link need to add?
<div class="container">
<header class="animated slideInDown text-center text-white p-5">
<h1 class="display-4"> Using Animation! </h1>
</header>
</div>
All you need to do is to call the right classes for it to work and activate.
you must call animate__animated and just copy the effect from their website and paste it and it should work.
Note that when I copied their class it was animate__slideInDown not slideInDown.
<div class="container">
<header class="animate__animated animate__slideInDown text-center p-5">
<h1 class="display-4"> Using Animation! </h1>
</header>
</div>
It could be that for some animations you need all librarys from bootstrap (also js und jquery)
also bootstrap has no animations
what you mean is mdboostrap
try following this guid -> https://mdbootstrap.com/md-bootstrap-cdn/
I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.
Hey so I am trying to inject a background image to my Django template however for some reason I do not know why it not loading I tried inline styling on the html(** ) tag but nothing
I the tried to to make an external css file but still not working can you please show me what I can be possibly doing wrong here.
** Below is the code to my html tag that I want to put the background image to**
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate">
<h2 class="subheading">Leave the house cleaning chores to us</h2>
<h1 class="mb-4">Let us do the dirty work, so you don't have to.</h1>
<p>Learn more <span class="ion-ios-arrow-forward"></span></p>
</div>
</div>
</div>
</div>
And here below is the external css file that I made to test if it would work having an external stylesheet
.hero-wrap js-fullheight{
background-image: url('static/images/bg_1.jpg');
}
If possible can you teach me how I can make inline background-image on the html tags using Django templates
try this:
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5" style="background-image: url({% static '/images/bg_1.jpg' %});">
First off I would like to say that I know I am not the most efficient or clean in my HTML.
My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css
Linking:
<head>
<title>Help Menu</title>
<!--
==============================================================================================================
REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)
==============================================================================================================
-->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/bootstrap/css/custom.css" rel="stylesheet" >
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/npm.js"></script>
<script src="/jquery/jquery.js"></script>
<!--
==============================================================================================================
BOOTSTRAP REFERENCES DISTRO 3.3.7
==============================================================================================================
-->
</head>
For example I am able to change the background color of the panel using the <style> element:
<div class="container">
<div style="background-color: #4286f4;" class="panel panel-default">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
But I cant change the color of the panel using external CSS (the following CSS snippet is in custom.css):
.lukedbgcolor {
background-color: #4286f4;
}
<div class="container">
<div class="panel panel-default lukedbgcolor">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the lukedbgcolor class first like this:
<div class="lukedbgcolor panel panel-default">
ALL help / advice / criticism is welcomed,
Thanks!
The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />
Cache fix courtesy of #mayersdesign
This is due to the way that CSS works, it will give certain priorities to styles depending on where they are located. The reason defining in the HTML (also called an inline style) works is because it's given higher priority.
Using multiple stylesheets can cause problems and there are various solutions. You can use the keyword !important to give a certain style highest priority. It's generally discouraged because it makes it harder for others using your code to see why a style is being changed but if it's just yourself then go ahead:
.lukedbgcolor {
background-color: #4286f4 !important;
}
.panel.lukedbgcolor {
background-color: #4286f4;
}
Generally in CSS, the more specific selector is taken into account.
Let's say you have the following div:
<div id='myId' class='someClass'></div>
with the following CSS:
.someClass{
background-color:red;
}
#myId{
background-color:blue;
}
the div's background-color will be blue because it's more specific.
It's possible that the style of bootstrap provides a more specific selector than yours, and therefore overrides it.
Try adding an id to your div and see if it makes a difference. (since id's are unique they're as specific as can be)
I cannot (yet) comment on the original post. How are you loading this page? Are you seeing any errors in the browser console? The advice above to use the browser devtools and examine the element, see if the class is there, and if it is being applied or overridden by other defined styles would be the way to approach it.
You also want to have jquery.js loaded before the bootstrap.js, because bootstrap.js depends on jquery.js being loaded first. The browser console would also tell you this - it's a very useful tool!
I've not thought about this massively and I'm probably missing something very obvious but how does one properly apply background colours to '.row'
The code I've been using:
<div class="row">
<div class="col-lg-4 white-flood">
</div>
</div>
However this only applies to columns. I've tried wrapping them in a div, applying the style to the .row class among other things
Thanks :)
EDIT:
This should help people find out what my issue is (applying to .row should do the trick but something in my code is stopping it from working). The 4 thumb links should have awhite background.
Click here for site
Two options:
1) Set the background color to the row:
<div class="row white-flood">
<div class="col-lg-4"></div>
</div>
2) You need to use table layout
<div class="row" style="display: table">
<div class="col-lg-4 white-flood" style="float: none; display: table-cell"></div>
</div>
But this will slightly break the bootstrap design, as the table cant have a negative margin.
Added position: relative to my flood class and it worked...
I believe it is something to do with my responsive background intefering.