I'm currently working in a "Quote Machine" as part of freeCodeCamp projects. I'm trying to use a list to get three list items behaving as buttons, one next to the other by using the bootstrap class "in-line" however it is not working since each of the li occupy one row. This is my code so far with no CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css"
integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Random Quote Machine</h1>
<h5>WARNING: These quotes might inspire you</h5>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="quote-box">
<p id="quote">Test quote</p>
<p id="author">Anonimous</p>
</div>
<ul class="col-md-12 list-inline">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
And this is the result in the browser:
list-inline not rendering
Thank you in advance for any feedback
You need the list-inline-item class on the items...
<div class="col-md-12">
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item"><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
https://www.codeply.com/go/uzJ5wlWfr0
Also, the UL should go inside the col-md-12. See the Bootstrap Documentation.
Related
I have a asp.net application, where I wanted to use a premade bootstrap template for my frontend. I found this one.
The original site from the template looks really nice with a background like this:
I copied all the css into my css folder, and also took the html and cut some parts of it out such that I could just render my own content in it.
My _layout.cshtml that should be a scaffolding for other html files looks now like this:
<!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 name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2021</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
As far as I understand, the central line for displaying the background image is this one:
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
Where we set the image as our background.
The problem is though, that the site I get, looks like this:
Instead of having the nice image as a background, I just get grey. I would like for the image to be displayed.
How do I get the image shown in the background, just like in the source i have linked?
EDIT:
I now looked in the dev tool, where I found it:
But clicking the image gets me This localhost page can’t be found.
So it might look like the given path is bad. This is a little bit strange to me, since my IDE actually suggested the entire current path to me.
What should I do with my path such that the image can be found?
Is your mentioned path (../../wwwroot/assets/home-bg.jpg) correct? because image won't be rendered if path is incorrect, and the background color becomes grey because of the classname mentioned.
i after trying the path ../../wwwroot/assets/home-bg.jpg I then tried to assume that my application by default would be looking in the wwwroot directory. So I tried the path assets/home-bg.jpg.
My IDE (rider) shows red lines, and complains about it. But it works
I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.
What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 200px; /* bottom has to be the same as footer height */
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.copyright-container
{
padding: 10x;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="2.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container"><p>Page Content</p></div>
<footer class="section footer-classic context-dark bg-image" style="background: #000000;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4">
<hr>
<div class="text-center center-block">
<p>You can follow us on:</p>
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<hr>
</div>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Site</h5>
<ul class="nav-list">
<li>About</li>
<li>Help</li>
<li>Accessibility</li>
</ul>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Legal</h5>
<ul class="nav-list">
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
</ul>
</div>
</div>
</div>
<div class="row copyright-container">
<p class="rights">
<span>© </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</footer>
</body>
</html>
I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you're going to use Bootstrap's grid system, then it's a good idea to follow the structure that they recommend in order to have a fully responsive website.
Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.
The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sticky Footer inspired by Bootstrap Examples</title>
<!-- Bootstrap 4 CDN as of 01/17/2020 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fontawesome 4.7 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,
body {
height: 100%;
}
.fa {
color: white;
}
</style>
</head>
<body class="d-flex flex-column">
<!-- Main page content -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Main container</h1>
</div>
</main>
<!-- Respoonsive footer using Bootstrap's grid layout -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<div class="row">
<div class="col align-self-center">
<i class="fa fa-twitter-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-envelope-square fa-4x" aria-hidden="true"></i>
</div>
<div class="col">
<h5>Site</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">About</a></li>
<li><a class="text-muted" href="#">Help</a></li>
<li><a class="text-muted" href="#">Accessibility</a></li>
</ul>
</div>
<div class="col">
<h5>Legal</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Terms of Service</a></li>
<li><a class="text-muted" href="#">Privacy Policy</a></li>
<li><a class="text-muted" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Working example here
I have edit your css & HTML
html,body, .wrapper {
position: relative;
height: 100%;
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
}
.copyright-container
{
padding: 10x;
}
https://jsfiddle.net/lalji1051/r5aqxetv/7/
In the following simple document, neither of the dropdown menus actually drop down when clicked. The first one is copy-pasted from the Materialize website. I'm viewing this with Firefox on a Linux. I've moved some files around so that's why the file paths are slightly different, but the developer console shows no error (except the thing about character encoding not declared). Everything I've implemented from the Materialize site up to this has correctly rendered, and I've checked that the JavaScript code is running.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="../css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown2" class="dropdown-content">
<li>one<span class="badge">1</span></li>
<li>two<span class="new badge">1</span></li>
<li>three</li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
<div class="row">
<div class="col s3">
Drop Menu <i class="material-icons right">arrow_drop_down</i>
<ul id="dropdown2" class="dropdown-content">
<li>Home</li>
<li>Map</li>
<li>1. Prehuman</li>
<li>2. Ancient</li>
<li>3. Classical</li>
</ul>
</div>
<div class="col s9">
<div class="section hoverable z-depth-2">
<h5 class="center-align">Section header</h5>
<p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>
<img src="../images/pic.png" alt="" class="responsive-img">
<div class="video-container">
<iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="../js/materialize.min.js"></script>
</body>
</html>
I've tried variations on this where I've replaced data-target with data-activates and replaced dropdown-trigger with dropdown-button, but the behavior is the same. The button itself shows, and when the mouse hovers over it transforms to a click symbol. But when you click, nothing happens.
I think you just forgot to initialize materialize M.AutoInit(); https://materializecss.com/auto-init.html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<ul id="dropdown2" class="dropdown-content">
<li>
<a href="#!">one
<span class="badge">1</span>
</a>
</li>
<li>
<a href="#!">two
<span class="new badge">1</span>
</a>
</li>
<li>
three
</li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
<div class="row">
<div class="col s3">
<a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu
<i class="material-icons right">arrow_drop_down</i>
</a>
<ul id="dropdown2" class="dropdown-content">
<li>Home</li>
<li>Map</li>
<li>1. Prehuman</li>
<li>2. Ancient</li>
<li>3. Classical</li>
</ul>
</div>
<div class="col s9">
<div class="section hoverable z-depth-2">
<h5 class="center-align">Section header</h5>
<p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>
<img src="../images/pic.png" alt="" class="responsive-img">
<div class="video-container">
<iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
</body>
</html>
I tried to make my navigation menu keep responsive on mobile and tablet, but it always break into new line when I tested responsive mobile from browser development tool.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Application Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class='fa fa-floppy-o'></i> New
</li>
<li>
<i class='fa fa-pencil-square-o'></i> Edit
</li>
<li><i class='fa fa-check'></i> Cancel</li>
<li>
<div class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="ID" ID="ID">
</div>
</div>
</li>
<li>
<div class="btn-group" style="padding: 9px 0px 0px 0px; margin-left: 15px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">More Action</button>
<button type="button" class="btn btn-primary" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><i class='fa fa-files-o'></i> Copy Record</li>
<li><i class='fa fa-clipboard'></i> Paste Record</li>
<li><i class='fa fa-reply'></i> Reverse Record</li>
<li class="divider"></li>
<li><i class='fa fa-list'></i> List Live Record</li>
<li><i class='fa fa-list'></i> List Un-authorize Record</li>
<li><i class='fa fa-list'></i> List History Record</li>
<li class="divider"></li>
<li><i class='fa fa-print'></i> Export Record</li>
</ul>
</div>
</li>
</ul>
</div>
I would like to keep menu button, input box and dropdown menu keep as one line even on the mobile tablet break point.
How can I archive that, I'm not sure if problem caused from this <meta name="viewport" content="width=device-width, initial-scale=1"> but the only goal I would like to keep it as responsive. Thanks.
I am working on an index.html file and inside my head and body tag, I have a nav element. However, in Komodo Edit, version 10.1.1, build 17414, platform linux-x86_64., It red-underlines the nav element and gives me the following erorr message:
HTML: Error: <nav> is not recognized!
This is what my code looks like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
Does anyone know what might be causing this?
Komodo has 2 "Languages" that cover HTML, one is called "HTML" and one is called "HTML5". HTML5 covers the nav element, HTML does not. You need to change your language selection to HTML5.
The language selection is done from the right side of the statusbar, it should currently say "HTML".
Can this Work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
this Might not work but guess Ill try