im new to this.
i want to make an image as a background to my text that will say Welcome, !
i'm not sure if i should use jumbotron for this or just an image with text over it?
anyway i went ahead with jumbotron and my image would not show up; i have downloaded the banner image in the images folder.
here are some codes, i couldn't see where i've gone wrong, please help?
Relevant css codes
<head>
link rel="stylesheet" href="assets/css/BS5-Jumbotron-with-background-Image.css"/>
</head>
<body class="text-end">
<div class="p-5 mb-4 round-3 position-relative">
<div id="bgImage" style="background-image:url('img src=/images/homepage_banner.jpeg');">
</div>
<div class="container-fluid py-5 style=" z-index:999999">
<h1 class="display-5 text-start fw-bold"> Welcome, nic!</h1>
</div>
</div>
</body>
thanks in advance :)
Add your link tag properly
<link rel="stylesheet" href="assets/css/BS5-Jumbotron-with-background-Image.css"/>
Related
I'm new to CSS and Bootstrap .
Whenever I try to make a picture stick to left position so I can write text on the right side, I use this Bootstrap class rounded float-left
The problem is the image gets over other content in my webpage like the footer.
I know because it's floating .
How can I fix this ? Thank you.
<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>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
</div>
Try like this
Try like this please
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 clearfix">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
You are correct that you should use the "clearfix" class (under the condition that you use float).
You can achieve what you want by inserting a "clearfix" where appropriate.
I attach an image below. I sincerely hope this helps.
upload image
The easiest solution is to use the clearfix utility class, ideally adding it to the div that encloses your float (which would be the div with the class span-2 in your code above). This utility class ensures that the floats are cleared properly, and avoids problems like the one you encountered.
use flexbox or bootstrap grid, or even <table></table>
flexbox tutorial: https://www.tutorialspoint.com/flexbox/index.htm
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/
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' %});">
I have the following markup (Bootstrap 4):
<div class="col-3 d-flex flex-column">
<img class="align-self-center" src="#"/>
</div>
Since the container is flexed, the images are stretching. I'm aware align-self-center will resolve the issue, however, I don't want the image to be centered. I want the image to be align-self-left (left aligned rather than centered), but this stretched the image again.
Any way around this?
Here you go!
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-3 d-flex flex-column">
<img class="align-self-start" src="https://dummyimage.com/600x400/000/fff"/>
</div>
It would be align-self-start. Bootstrap flex doesn't use term left
Instead of using <img class="align-self-center" src="#"/> use <img class="align-self-start" src="#"/>. This should solve your problem (Basically it means that you image will be aligned to the start of your column)
So you can see what I currently have here: https://steelcowboy.me
Basically what I want is a white content area, grey on the sides and my blue navbar. I don't want any grey atop or below the white part (i.e. I want grey on the sides only, white in the middle). However, I'm not sure what I need to do -- I tried different display options for the container element, but the one that worked (flex) then messes up all the content inside. I feel like this is a really simply fix, but can't quite seem to get it. Anyone have an answer? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Steelsite</title>
<meta charset="utf-8">
<link href="/css/materialize.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#3f51b5">
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style>
</head>
<body>
[navbar in here]
<main>
<div class="container white">
<h3 class="center-align">Welcome to the site of James Heald</h3>
<div class="row">
<div class="col s12 m6">
<div class="flow-text" style="font-size: 125%;">
<p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p>
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p> </div>
</div>
<div class="col s12 m6">
<div class="center-align">
<img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div>
</div>
</div>
<div class="divider"></div>
<h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts
down the system for days.
</p>
<div class="container center-align">
<img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img">
</div>
</div>
</main>
<script src="scripts/google.js"></script>
</body>
</html>
The problem is this selector:
h3 {
margin: 1.46rem 0 1.168rem 0;
}
It is setting a top margin which is pushing down the rest of the container.
If you set margin-top: 0 to that specific element, it should remedy the issue.
The space is contributed by your heading, remove the top margin on it and you're good. The solutions below illustrates how to fix them using inline styles but you should really consider using css classes :)
Solution 1: remove top margin on the h3, either inline or via a css class.
<h3 class="center-align" style="margin-top: 0px;">Welcome to the site of James Heald</h3>
Solution 2: Add a top padding to the container, either inline or via a css class. This might be a better approach as it does not interfere with your h3 classes, since you might want the top margin elsewhere on your site.
<div class="container white" style="padding-top: 10px;">
To make the container span the whole height, make sure all parent elements has height: 100%. e.g.:
<main style="height: 100%">
<div class="container white" style="padding-top: 10px; height: 100%">
...
Solved by adding overflow:auto to container