I got 2 hr lines in my jumbotron. The first one aligns correctly as I want at the beginning of the page. The one at the bottom of the logo should be at the end of the page. I set a vh hight of 100.
.jumbotron{
height: 100vh;
How can I align the hr at the end? I tried something like align-items-end, but this didn't work out.
I'm using Bootstrap 4 and the html looks like this:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<hr style="background: white; justify-content-start">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="align-self-end" style="background: white;">
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>
To solve this (while keeping the <hr> elements inside the jumbotron), add the classes d-flex flex-column h-100 to the container inside the jumbotron and then add the mt-auto class (margin-top:auto) and optionally the mb-0 class (margin-bottom:0) to the last <hr> element.
d-flex flex-column classes enable a flexbox column and h-100 gives it 100% height. mt-auto on the <hr> then pushes it down. Via the pb-* class on the container, you can then control how far from the bottom the <hr> sits. In this case, I've chosen pb-4.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron bg-info pb-0" style="height: 100vh;">
<div class="container d-flex flex-column h-100 pt-0 pb-4 header-h">
<hr style="background: white; height: 1px; width: 100%; border: 0">
<div class="align-items-start row justify-content-center mx-auto">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="https://placehold.it/500x100" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="mt-auto mb-0" style="background: white; height: 1px; width: 100%; border: 0">
</div>
<!-- container -->
</section>
<!-- Header -->
Note: I've also added mx-auto to the logo image div to center it horizontally.
Every thing is fine with your code, Except you have coded <hr> tags inside the jumbotron, just add those hr tags before and after the jumbotron, then you will get result as u expected
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
<style>
.jumbotron{
height: 100vh;}
</style>
</head>
<body>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impressionen
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<hr style="background: white; justify-content-start"/>
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<hr class="align-self-end" style="background: white;"/>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>
Related
I am trying to build a responsive website with bootstrap 4 that shows the sidebar links as a button toggle. My current implementation, when reduce to mobile screen dimensions, shows the sidebar links at the top of the page. Appreciate any help in converting them to a toggle.
Below is my html code:
<!DOCTYPE html>
<html lang="en-US"><head>
<link rel="stylesheet" href="https://themes.getbootstrap.com/wp-content/themes/bootstrap-marketplace/style.css?ver=1590611604">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body class="page-template-default page page-id-49440 woocommerce theme-dokan woocommerce-js dokan-theme-dokan">
<main id="main" class="site-main main">
<section class="section">
<div class="container">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav123" aria-controls="nav123" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="section pt-10 mt-md-10">
<div id="the-guide" class="container-fluid">
<div class="row justify-content-between pb-0 pb-lg-2" >
<!--<div class="col-md-3 col-xl-2 d-none d-lg-block" id="inside">-->
<div class="col-md-2 col-xl-3" id="inside">
<ul id="nav123" class=" nav flex-column ">
<li class="nav-item nav-item-heading">
Theme 1
</li>
<li class="{{ 'active' if active_page == 'page1' else '' }}" >
Page 1
</li>
<li class="{{ 'active' if active_page == 'page2' else '' }}" >
Page 2
</li>
</ul>
</div>
<div class="col-lg-9 mb-4 mb-lg-0 order-lg-2">
<h2> this is a test</h2>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</main>
<style>
.pagelink{
color: hotpink;
}
.active {
font-weight: bold;
<!--background-color: lightgray;-->
}
</style>
</body>
</html>
An example implementation where a navbar was converted to a button navbar toggle is below:
<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">
<title>Net Ninja Pro - the Book</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
section{
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light pt-5 pb-4">
<div class="container-xxl">
<!-- navbar brand / title -->
<a class="navbar-brand" href="#intro">
<span class="text-secondary fw-bold">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row g-4 justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dignissimos?</p>
Buy Now
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img src="/assets/ebook-cover.png" class="img-fluid" alt="ebook">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<!-- topics at a glance -->
<!-- reviews list -->
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
I'm new to bootstrap 4. I'm trying to build a responsive website using bootstrap for practice. I have an issue with my image not resizing to fit the screen.
<html lang="en">
<head>
<!-- Required Meta Data -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;700&display=swap" rel="stylesheet">
<!-- Bootstraps CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Custome CSS -->
<link rel="stylesheet" href="app.css">
<title>Museum of Candy</title>
</head>
<body>
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
CANDY
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navLinks" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUR
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="text-white text-center d-none d-lg-block">
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
</div>
</div>
<div class="col-lg-6 px-0">
<img class="img-fluid" src="imgs/img1.jpg" alt="Hand Donut">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- JQuery First, Then Popper.js, then Bottstarp JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In this my image is not covering the entire column space and leaving a portion.
even when i resize the screen to medium resolution image is not covering full screen
when i try to add css to it they are being crossed of.
CSS File
body{
background: #f5d9d5;
font-family: "Nunito", sans-serif;
}
#mainNavbar{
font-size: 1.5rem;
font-weight: 100;
}
#mainNavbar .nav-link{
color: white;
}
#mainNavbar .nav-link:hover{
color: #EA1C2C;
}
#mainNavbar .navbar-brand{
color: #EA1C2C;
}
<img class="img-fluid" style="float:right;" width="100%" src=...>
This will make the image fit the parent div
and should probably solve your issue
I would like my search bar and "Camera search" to be about 75% up from the bottom of the screen, so 25% of the white space when measured from the navbar. I'm having issues vertically aligning it.
I've tried using vertical-align: 25% in my CSS file for the #search-header id, but to no avail.
<!-- index.html -->
<!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="Camera search."">
<meta name="author" content="author">
<title>Camera App</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'core/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'core/css/custom.css' %}" rel="stylesheet">
<!-- Angolia search CDN and CSS -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img alt="brand" src="{% static 'core/img/logo_with_tagline.png' %}" ></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 active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Search section -->
<div id="search-header" class="container-fluid">
<div class="row">
<div class="col-xl-9 text-center mx-auto">
<h3>Camera search</h3>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-xl-5 ais-InstantSearch mx-auto">
<input id="searchbow" name="q" placeholder="Search" autocomplete="off" autocorrect="false" spellcheck="false" class="form-control" type="search" />
</div>
<div id="hits"></div>
</div>
</div>
<section class="hits">
<div class="container">
<div class="row">
<div class="col-xl-9 text-center">
<h1>text</h1>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'core/vendor/jquery/jquery.slim.min.js' %}"></script>
<script src="{% static 'core/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/g/algoliasearch,algoliasearch.helper"></script>
<script src="{% static 'core/js/search.js' %}"></script>
</body>
</html>
/* custom.css */
.navbar-brand > img {
max-height: 40px;
}
#search-header {
vertical-align: 25%;
}
Here's the results as of right now: https://jsfiddle.net/3tf780np/
Here is an image of something similar i'm trying to achieve, except without the big text saying "A list of remote jobs".
U can use margin-top instead of vertical-align on search-header to adjust spacing from the navbar
Please see the following code. I just want to center content with a footer that appears at the bottom, all of which is inside a background cover image. I've tried doing this with Bootstrap4 containers as well as d-flex configurations, all of which has been an abysmal fail. :(
Presently I'm using two columns that are stacked on top of each other but it doesn't work when you make the screen smaller in height. I'm hoping for the proper way to do this by actually centering content using the entire screen while maintaining a footer.
Also see here for a working demo: https://jsfiddle.net/m05heusn/
<!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>t-rex</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- bootstrap4 css should load first to be available globally -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js" integrity="sha384-vGq6VlJ/rGDK5hwCZhgtrb5j4nOanwgWgBSe9anrJGQHqCgkBo45u6lAxlVR0U+Q"
crossorigin="anonymous"></script>
<style>
html,
body {
font-family: 'Josefin Sans', sans-serif;
height: 100%;
}
#cover {
background-attachment: scroll;
background-image: url('http://source.unsplash.com/9euUL1nE9aA/1920x1080');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=xyz"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'xyz');
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light afixed-top py-4">
<div class="container">
<a class="navbar-brand" href="#">
t-rex
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div> <!-- navMenu -->
</div> <!-- container -->
</nav>
<div id="cover" class="h-100">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-12 align-self-center text-center">
<div class="display-1 d-none d-sm-block">
t-rex
</div>
<div class="display-3 d-block d-sm-none">
t-rex
</div>
</div>
<div class="col-12 align-self-end p-2">
<div class="d-none d-sm-block text-right">
Copyright © 2018 t-rex. All rights reserved.
</div>
<div class="small d-block d-sm-none text-center">
Copyright © 2018 t-rex. All rights reserved.
</div>
</div>
</div>
</div>
</div>
<!-- cover
<script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT "
crossorigin="anonymous "></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
crossorigin="anonymous "></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
crossorigin="anonymous "></script>
</body>
</html>
In this code block there is "text-right" class:
<div class="d-none d-sm-block text-right">Copyright © 2018 t-rex. All rights reserved.</div>
So, change it to "text-center".
enter image description hereEverytime I add a image with img tag to the html file the navbar stops working? Anyone have an idea... thank you in advance. I thought at first it had something to do with the img-responsive class but it seems not to be the issue.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>
About
</title>
<meta name="description" content="is applying to be a full stack developer student .">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="css.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav" aria-expanded="false" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li class="active">ABOUT <span class="sr-only">(current)</span></li>
<li>RESUME</li>
<li>PROJECTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">
<p class="intro">Hi, my name is<br> Angel<br>and I am a</p>
<div class="textShow">
<div class="textSlider fade">
<p><strong>DEVELOPER</strong></p>
</div>
<div class="textSlider fade">
<p><strong>M.B.A.</strong></p>
</div>
<div class="textSlider fade">
<p><strong>VETERAN</strong></p>
</div>
<div class="textSlider fade">
<p><strong>FOODIE</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 middleOne">
<p class="groundUp">Creating and building from the ground up</p>
//this breaks navbar<img class=" img-responsive beet1" src="Graphics/beetv1.svg" alt="RedBeet"/>
</div>
</div>
</body>
</html>
If there is a sample code of the responsive menu along with the photo in the menu, please send a comment in this post. If it is possible, please develop my same code so that I can put a picture in its menu.