Assume I have a simple website made with Bootstrap 4 containing header, navbar, content-area and footer.
My demo-website can be found and live-edited on JSFiddle: https://jsfiddle.net/26zda5xv/2/
Please find below a screenshot of the website too:
I want the <div class="container"> to fill out the whole page/window-height at least. (min-height?)
This should be done by extending the height of the <div id="content">.
Of course the solution should take care of various screen-resolutions/devices automatically.
How to do this correctly based on the JSFiddle?
Is there a build-in solution in Bootstrap 4 for this task?
Thank you!
to solve this we need 2 steps:
add d-flex flex-column min-vh-100 classes to the container.
add flex-grow-1 class to the content div
see this fiddle
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body class="bg-secondary">
<div class="container bg-white shadow border border-dark d-flex flex-column min-vh-100">
<img src="http://www.apexcartage.com/wp-content/uploads/2014/05/placeholder-blue.png" class="img-fluid" alt="Responsive image">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div id="content" class="my-3 flex-grow-1">
<p class="h3">Content</p>
</div>
<footer>
<div class="bg-dark text-white mt-4 p-3 border-info" style="border-top: 4px solid">
<h5 class="title">Footer</h5>
</div>
<div class="bg-info p-1"></div>
</footer>
</div>
</body>
Related
How do i reduce the space between the nav bar and the image?
(1) Need help for that (I am a newbie)
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3">
<h5 class="my-0 mr-md-auto font-weight-normal"></h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#"><i class="fas fa-user"></i></a>
<a class="p-2 text-dark" href="#"><i class="fas fa-shopping-cart"></i></a>
</nav>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
**<svg class="display-4">
<image href="assets/img/picture.png" />
</svg**>``
<p class="lead">Quickly build an effective pricing table for your potential customers with this
Bootstrap example. It's built with default Bootstrap components and utilities with little
customization.</p>
</div>
https://jsfiddle.net/Samantha92/8Ljy9xb5/2/
(2) Also, I need help, if I have 10 cards, I need them to show three each on the screen and maybe use carousel and move them off one at a time, with the center card being the one I can view or toggle.
I'm just starting to learn the code, going through the courses.
I've made the react app, and have a basic HTML template to show up before the bundled.js is loading (for slow connection)
<link href="https://fonts.googleapis.com/css?family=Public+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="..." crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="..." crossorigin="anonymous"></script>
<div id="app">
<header class="header-bar bg-primary mb-3">
<div class="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 class="my-0 mr-md-auto font-weight-normal"><a class="text-white" href="/">ComplexApp</a></h4>
</div>
</header>
<div class="py-5 my-5 text-center">
<div class="dots-loading">
<div></div>
</div>
</div>
<footer class="border-top text-center small text-muted py-3">
<p>
<a class="mx-1" href="/">Home</a>
<!-- -->|
<!-- -->
<a class="mx-1" href="/about-us">About Us</a>
<!-- -->|<a class="mx-1" href="/terms">Terms</a>
</p>
<p class="m-0">
Copyright © 2020
<!-- -->
ComplexApp. All rights reserved.
</p>
</footer>
</div>
In Chrome, it loads nicely:
But for some reason in Firefox, the page is blank until the js is fully loaded.
Network tab shows that CSS and fonts are loading all the time in parallel with js
What might be the problem? is it some Firefox-specific stuff? Can it be fixed somehow?
IMAGE :
How do I set a standard container size and also how do I size the images in a proper way so that the clarity of the images dont disturb and also gives a good look.
The images are of different sizes so dont know what to do exactly, should I set them to a standard size? or is there any better way?
CODE :
<div class="album py-5 bg-light">
<div class="container">
<div class="row ">
{% for job in jobs.all %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class = "card-img-top" src = "{{job.image.url}}">
<div class="card-body" >
<p class="card-text" >{{job.summary}}</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
if you are using bootstap 4 add a class property
<img class = "card-img-top" src = "{{job.image.url}}" class="img-fluid" >
I am trying to use a header from a website in HTML but i am getting a JSX error
<div className="container h-100">
<div className="row h-100 align-items-center justify-content-center text-center">
<div className="col-lg-10 align-self-end">
<h1 className="text-uppercase text-white font-weight-bold">Your Favorite Source of Free Bootstrap Themes</h1>
<hr className="divider my-4">
</div>
<div className="col-lg-8 align-self-baseline">
<p className="text-white-75 font-weight-light mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
<a className="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div>
</div>
</div>
The error is on this line:
<hr className="divider my-4">
It should have a self-closing /
As in <hr className="divider my-4" />
I have a two column layout where my footer copyright is on the left side. When I decrease the screen size to mobile for testing, the footer on the left, is put to the middle and the second column starts after the footer.
I can fix this with JavaScript with matchMedia(). However, matchMedia() only works on mobile. Is there a way to match media and screen? Something like matchMediaScreen()? See example:
.branding-color {
background-color: darkblue;
}
.welcome,
.students {
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row vh-100">
<div class="col-md-4">
<section class="row logo-area mb-5 p-3">
<div class="col-6">
<a href="/index.php">
<img class="img-fluid" :src="logo" alt="Secret Logo" />
</a>
</div>
<div class="col-6 text-right">
<img class="img-fluid " :src="hpoLogo" alt="Secret Logo">
</div>
</section>
<!-- row logo-area -->
<div class="col-sm-12 d-flex justify-content-center flex-column text-center uni-center">
<div class="mb-5">
<img class="img-fluid uni-logo" :src="universityLogo" alt="" />
</div>
<div class="login mb-5">
<a class="btn btn-blue mr-2" href="/login.php">Login</a>
<a class="btn btn-green" href="/register.php">Register</a>
</div>
<nav class="nav flex-column mb-5">
Support
Privacy Policy
Terms & Conditions
</nav>
<div class="social">
<img :src="facebook" alt="" />
<img :src="twitter" alt="" />
<img :src="instagram" alt="" />
<img :src="mail" alt="" />
</div>
</div>
<footer>
<p class="text-center">© 2019 All rights reserved. Designed and hosted by Someone Special</p>
</footer>
</div>
<!-- col-md-3 -->
<div class="col-md-8 d-flex align-items-center justify-content-center branding-color">
<div class="col-md-8 welcome-white rounded">
<h2 class="welcome m-0 font-weight-bold">Welcome</h2>
<h2 class="students mb-5">Students</h2>
</div>
</div>
<!-- col-md-8 -->
<div class="m-footer"></div>
</div>
<!-- row -->
</div>
<!-- container-fluid -->
MDN says:
In JavaScript, you can use the Window.matchMedia() method to test the window against a media query.
So, for example:
const query = window.matchMedia("screen and (min-width: 992px)");
What you insert is just a string, so you can do some smart things pretty easily with template literals if you are using ES2015:
const min = 576;
const getMediaQuery = minWidth =>
window.matchMedia(`screen and (min-width: ${minWidth}px)`);
const query = getMediaQuery(min);
const screenTest = e =>
e.matches
? console.info(`The window is at least ${min}px wide.`)
: console.info(`The window is less than ${min}px wide.`);
query.addListener(screenTest);
screenTest(query);