Jumbotron not showing as grayish - css

My bootstrap jumbotron will not show a dark grayish background like what the docs show. Am I doing something wrong?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<br/>
<div class="jumbotron">
<h1 class="display-4">Todo App</h1>
<p class="lead">This is a simple todo app that can help you keep track of your todos.</p>
<p class="lead">
<a class="btn btn-primary btn-lg">Create a new todo list</a>
</p>
</div>

I think you are seeing Bootstrap v4 documentation but as per v5 documentation you need to add classes like bg-light or bg-dark
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<br/>
<div class="p-5 jumbotron bg-light">
<h1 class="display-4">Todo App</h1>
<p class="lead">This is a simple todo app that can help you keep track of your todos.</p>
<p class="lead">
<a class="btn btn-primary btn-lg">Create a new todo list</a>
</p>
</div>

Related

Blazor server side android/iOS view issue

I have Blazor Server-side application and I am now testing it on android and ios phones.
I have noticed that the header of the website is not displayed as it does on my desktop.
Here is how my Header looks on my Desktop:
and here is how it looks on my android and ios devices:
Here is my MainLayout.razor code:
#inherits LayoutComponentBase
<div class="main">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU"
width="120"
height="95" />
<div class="container">
<a class="navbar-brand" asp-area="" href=".">EEXI</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" href="/About">About</a>
</li>
</ul>
</div>
<div class="dropdown-menu-left">
<img src="https://i.imgur.com/yBzRXgu.png" title="Admin" />
</div>
</div>
</nav>
<div class="content px-4">
#Body
</div>
<footer class="no-print">
<div class="no-print">
<hr />
<p>© 2022 - Dromon Bureau of Shipping - Privacy Policy</p>
</div>
</footer>
</div>
Here is my Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EEXI Calculator</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/JS/JavaScript1.js"></script>
<script src="~/jquery/jquery.js"></script>
<script>
// When the user clicks the button, the page scrolls to the top
function OnScrollEvent() {
document.documentElement.scrollheight = 0;
}
</script>
</body>
</html>
I notice here that there is a menu on my header and I don't know where that comes from. And the button About is missing. And the general view is out of order.
Questions:
Can I make my view the same as the desktop one?
If not, what could I do to make it work?
I have noticed that if I switch on Desktop view from my Andoird (iOS does not switch) everything looks normal. Is there anything I can do to force my app to run on Desktop view all the time? (most optimal solution since it also fixes other minor issues)
Try not using navbar and use just nav:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<!--Replace with your logo-->
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
See bootstrap doc
Regarding Questions 3:
I have removed this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
from Host.cshtml and the app opens as a Desktop view only.

Cards in a split screen

I'm trying to build product cards into a split screen but they continue to stack on top of each other instead of side-by-side.
Does anyone have a solution ?
My code can be found below. I'm a newbie at coding, so ignore the some of the images and lack of experience. The purpose of this code is to create a uniform display of items being auction offed for charity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stuf Auction</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="stufcss.css">
</head>
<body>
<!-- left side -->
<div class="split left">
<div class="centered">
<img src="images/stufgreen.png" alt="stuf logo">
<h2></h2>
<p></p>
</div>
</div>
<!-- right side -->
<div class="split right">
<div class="centered">
<div class="container">
<div class="row row-content">
<div class="card">
<img src="images/jordanshoes.jpg" alt="Denim Jeans" style="width:100%">
<h1>Tailored Jeans</h1>
<p class="price">$19.99</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p>
<p><button>Bid</button></p>
</div>
<div class="card">
<img src="images/jordanshoes.jpg" alt="Denim Jeans" style="width:100%">
<h1>Tailored Jeans</h1>
<p class="price">$19.99</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p>
<p><button>Bid</button></p>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer class="site footer">
<div class="container">
<div class="row">
<div class="col-4 col-sm-2 offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="col-6 col-sm-5 text-center">
<h5>Social</h5>
<a class="btn btn-social-icon btn-instagram" href="http://instagram.com/"><i
class="fa fa-instagram"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://facebook.com/"><i
class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
</div>
<div class="col-sm-4">
<a role="button" class="btn btn-link" href="tel:+12065551234"><i class="fa fa-phone"></i>
1-206-555-1234</a><br />
<a role="button" class="btn btn-link" href="mailto:campsites#nucamp.co"><i class="fa fa-envelope-o"></i>
campsites#nucamp.co</i>
</div>
</div>
</div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</html>
There's no class as split in bootstrap-4. If you want to split your screen you can use bootstrap-grids
<div class="container">
<div class="row">
<div class="col-sm">
One column
</div>
<div class="col-sm">
One column
</div>
</div>
</div>
more info

How to move the button on bootstrap 4 card header always to be right ( responsive and desktop )?

I have the following code for a refresh button on a bootstrap 4 card header
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<!-- other markup -->
</div>
</div> <!-- ./ card -->
</div> <!-- ./ col-lg-12 -->
</div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn -->
But this button remains on the left side on desktop as well as in mobile mode, but i how do i make this button stays on the right side always on desktop mode as well as mobile mode this should support chrome, firefox and edge
You find a lot of ways to solve this issue. I added two examples.
"structure": One flex wrapper (orange border) and two cols inside (red border)
A. justify-content-between
By flexbox and justify-content-between
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between">
<h2>
Featured Featured Featured Featured Featured Featured very long text
</h2>
<div>
<button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div> <!-- ./ card -->
</div> <!-- ./ col-lg-12 -->
</div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
B. Flex and margin-left auto col
Flex wrapper & add margin-left auto for the icon col:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="d-flex">
<h2>
Featured Featured Featured Featured Featured Featured very long text
</h2>
<div class="ml-auto">
<button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div> <!-- ./ card -->
</div> <!-- ./ col-lg-12 -->
</div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Can't center a button succesfully within a container

I'm using bootstrap 4 and I can't manage to center a button/link properly - no matter how I try to use text-center class (surround it with div or on the link)
<div class="row text-center">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
codepen here:
https://codepen.io/anon/pen/GdbPyr
Just add: justify-content-center to the parent component. The code will look like this:
<!-- ******Key Features****** -->
<section class="key-features ">
<div class="container pt-4">
<div class="row justify-content-center"style="background: red">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>
working pen: https://codepen.io/manAbl/pen/bMPOJM?editors=1000 ;
-- I added the background just to have a hint, that's something that really help me and allow me to have some perspective from time to time --
Hope helps :)
You can replace the text-center on your btn with mx-auto to force even left/right margins:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="key-features ">
<div class="container pt-4">
<div class="row">
<a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>

Navbar is not displayed

Why there is no navbar in the below snippet? Am I missing something? If yes, What?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
I want like the below image:
Color is changed!
You missed .navbar-default, adding it will show the navbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
Update
Also for your information, <center> tag has been deprecated referring to MDN Web Docs
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
You could use text-align: center or in your case since you are using bootstrap if you want the same effect as <center> you could add the class .text-center to parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid text-center">
<button class="btn btn-large btn-success" onClick="window.print()">Print</button>
</div>
</div>
</div>
</div>
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>

Resources