I am new to bootstrap and I am wondering why the image is overlapping the jumbotron, I need the image to stay in the Jumbotron class only.
Here is the image:
Image overlapping the class Jumbotron
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Coffee Cafe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="icon" href="Images/Free-Coffee-Logo-1-999x999.png">
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<a class="navbar-brand active" href="#">
<img src="Images/Free-Coffee-Logo-1-999x999.png" width="30" height="30" class="d-inline-block align-top" alt="">
Insta Coffee
</a>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Who We Are</a></li>
<li class="nav-item"><a class="nav-link" href="#">What We Do</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="jumbotron text-center">
<img class=" rounded float-left" src="Images/pexels-photo-437716.jpeg" alt="Coffee for front page">
<div class="page-header">
<h1>The More You Sip, the More You'll Love</h1>
</div>
<p>Lifes pleasurable moments is just one sip away!</p>
</div>
<div>
<p class="text-center">Who We Are</p>
<p>
We are a team of coffee makers dedicated to give you the best coffee.
Our team composes of people with 10 years of experience making coffee
</p>
</div>
<div>
<p class="text-center">What We Do</p>
<p>
We specialize with some of the most popular coffee in the market such as:
</p>
<ul>
<li>Caffè Americano</li>
<li>Café Latte</li>
<li>Cappuccino</li>
<li>Espresso</li>
<li>Flat White</li>
<li>Flat White</li>
</ul>
</div>
<div>
<p class="text-center">Contact Us</p>
</div>
</body>
</html>
Also, I am planning to do a website similar to this theme : https://blackrockdigital.github.io/startbootstrap-freelancer/
In this theme, Notice how the "portfolio" , "About" and "Contact"
is like the size of the browser.
I want my "Who We Are" "What We Do" and "Contact Us" to be like this. What class should I put?
You should give overflow:hidden to jumbotron class and manage css of img according to necessity
Make the parent anchor tag of image a block element using display:block;
Related
Trying to align my footer icons but I can't seem to center the first 2 images. The bootstrap icons center fine, but the first 2 images don't. I have tried doing things like align-items-center, justify-content-center, text-center, etc.
using bootstrap v5.3.0-alpha-1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container" style="color: black;">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">© 2022 Company, Inc</span>
</div>
<ul class="nav justify-content-center">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Team</li>
<li class="nav-item">Pricing</li>
</ul>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="opensea_icon" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://twitter.com/xxx">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://t.me/xxx">
<i class="bi bi-telegram"></i>
</a>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
The vertical-align property on your images is different than the bootstrap icons:
If you inspect the bootstrap icon, you'll see there is:
vertical-align: -.125em;
Try to add the same vertical-align to your images.
my scrollspy isn't working properly. It starts at home and can scroll down but when scrolling back up all tabs highlight except the "home" tab when you scroll all the way up. Additionally I've tried to include the data-bs-offset= "100" in my body tag but that has no effect on the scrolling. The tab changes to the next too early so I wanted to fix this with data-bs-offset. I'm pretty sure i've included the necessary cdn links for the css and js from the bootstrap website. Any suggestions?
<!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.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/8caef0b63d.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Tatyana Chalik</title>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-smooth-scroll="true">
<!-- navbar -->
<nav class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-lg-3 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="resume.html">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
<header id="home">
<h1> hi </h1>
</header>
<main>
<div class="container" id="about">
<h2 class="pt-5 pb-4 text-center">About Me</h2>
<p class="pt-5 text-center"> jsdklajsdfljsdalkfjsdljflsdjflsdfljdf </p>
</div>
<div class="container" id="projects">
<h2>hi2</h2>
</div>
<div class="container contacts" id="contact">
<h2 class="text-center pt-5 pb-3">Contact Me</h2>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
Hello I found some similarity case with your case. And I try to help you with send the link below. You can read and choose the one which the case is close to your case. Thank you, hope it can help you. bootstrap offset scrollspy not working or How do I set the offset for ScrollSpy in Bootstrap? or this one data-offset in Bootstrap Scrollspy is not offseting at all
I am trying to create a navigation bar for my website using bootstrap 5. The problem is I want to make my bar move to the left by using the class margin left auto (ml-auto). I do not know exactly why it did not work for me. Could you help me to figure out the reason, please? Thank you so much!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kim Phan</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <!-- make the nav bar size, nav bar font color, navbar background color-->
<a class="navbar-brand" href="">tindog</a> <!--brand color logo-->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href=""> Contact</a>
</li>
<li class="nav-item">
<a class="nav-link"href=""> Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link"href=""> Download</a>
</li>
</ul>
</nav>
</body>
My current navigation bar image
You can no longer set margins with ml.auto or mr.auto in Bootstrap v5. They are replaced by ms.auto and me.auto.
"ms" and "me" stand for "margin start" and "margin end."
[Auto margins from Bootstrap v5.1 documentation]
https://getbootstrap.com/docs/5.1/utilities/flex/#auto-margins
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">tindog</a>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</nav>
you are using your brand name inside the navbar class that's why the brand name is aligned in the left of navbar.
instead of that you can give your brand name in separete div element. After that your ml-auto attribute will work.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kim Phan</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div>
<a class="navbar-brand" href="">tindog</a> <!--brand color logo-->
</div>
<div class="navbar-nav ml-auto">
Conanct
Pricing
Download
</div>
</body>
My Code: https://jsfiddle.net/jqno1x6p/
I have this code, at the top, I have a hero element where I would like to place an image at the bottom-right section of the hero element and then overflow into the next section. I am not sure how to accomplish this.
Here is how my Hero element is set up:
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
Not sure what do you mean by overflow into the next section... you can set the overflow:hidden on hero-image class, to hide the overflown portion of the image:
.hero-image {
overflow:hidden; // <-- hide the overflow
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
A different approach (and perhaps better one) would be to fit the image to your page, by setting the image width equal to your page width - the height would be adjusted:
img {
width: 100%;
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image" style="overflow:hidden">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
On my page navbar appears vertically instead of horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Home | Bootstrap
</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My bootstrap application</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search" />
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello world!</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
Bootstrap 4
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sample
Why is that? According to the docs it should horizontal by default.
Add navbar-toggleable-md class in nav element to make it looks horizontally in md view :
See this fiddle
Docs :
The original answer applied to Bootstrap 4 alpha. For Bootstrap 4.0+, the navbar-toggleable-* classes have changed to navbar-expand-*. Use one of the navbar-expand-* classes to keep the Navbar horizontal.