I am decomposing my component into several small components in order to improve the maintenance of my code. The problem encountered is at the level of the header... I created an app-header component and I moved my header inside. The problem is that the page is completely unstructured afterwards... and I can't figure out why.
Here's what it looks like without breaking down the code:
This is what it renders when I drop the code into app-header:
I understand that there is a concern that must be at the level of the d-flex but how to solve such a problem?
<body class="bg-fontClair">
<div class="d-flex">
<!-- SideBar Left -->
<app-sidebar></app-sidebar>
<!-- Section droite -->
<div class="container p-0 d-flex flex-column align-items-center">
<!-- Header -->
<div class="d-flex w-100 bg-whiteBar align-items-center" style="height: 64px;
box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;">
<div class="container">
<div class="row align-items-center">
<div class="col-2 ps-4 d-flex">
<img class="mySmallIcon" src="./assets/game/toolBar/croix.png" alt="Croix">
</div>
<div class="col-8"></div>
<div class="col-2">
<img class="photoSmallProfil" src="./assets/game/imgProfil/scientist.png"
alt="Photo de profil">
</div>
</div>
</div>
</div>
<!-- Corps -->
<div class="mt-3">
<router-outlet></router-outlet>
</div>
</div>
</div>
</body>
thank you in advance
Related
I have the following bootstrap code with two columns as shown below. I would like to have the read more link at the bottom, aligned right. See image.
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
If you are using Bootstrap 5 you can do it in this way:
Add position-relative in your col, as said by previous answer of Saeed Shamloo:
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
And in the link class add position-absolute bottom-0 end-0 like this:
Read More
In this way you do not have to use external CSS code. You can find more information about bootstrap 5 position classes here.
So finally it will look like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
If you make the parent element position: relative you can use position: absolute on child elements to position them within the parent element. This example should place the link one font-width away from the bottom right corner of 'container-fluid'.
.container-fluid {
position: relative;
}
.primary-cta {
position: absolute;
right: 1em;
bottom: 1em;
}
For more info, here's a breakdown of CSS Positioning from CSS-Tricks. The link opens to the section on Parent --> Child positioning.
You can do it by adding position-relative to your col and position-abosolute bottom-0 end-0 to your link, like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
Beneath is some code for a website I am working on.
<div
class="container-fluid px-0">
<!-- row start -->
<div class="row no-gutters align-items-center h-full">
<div class="col-lg-3 offset-lg-2 col-md-8 offset-md-2 col-sm-10 offset-sm-1 sm:px-20 z-2">
<div class="masthead__content">
<div data-split="lines" data-split-page-reveal class="mr-minus-lg md:mr-0">
<h1 class="masthead__title fw-700 text-white js-title">
Title
</h1>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
Subtitle
</p>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow "></span>
</span>
<span class="button-text">Learn More</span>
</button>
</p>
</div>
</div>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 offset-lg-1 z-1">
<div data-parallax="0.7" class="masthead__img overflow-hidden h-100vh ml-minus-sm md:ml-0">
<div data-parallax-target class="bg-image js-lazy js-image" data-bg="img/index/light.jpg"></div>
<div class="masthead__img__cover js-image-cover"></div>
</div>
</div>
</div>
<!-- row end -->
</div>
Currently the div columns are situated as shown in the image beneath:
How can I change my bootstrap columns so that the first div actually overlaps the second (desired output shown in screenshot)
I know a resolution to this can be done purely through bootstrap and would greatly appreciate any help with this. I have tried changing the col-lg-x sizes, however, this only changes the width of the columns. I am also unable to find a solution to this online.
While it’s a little difficult to understand what you’re trying to do without an operational version of your code (as #Grumpy was asking), but if all you need is to have part of your left-side column overlap part of your right-side column, then you can do that by using absolution positioning on the left-side column and offsetting the right-side column.
I setup a quick example using some different column sizes for different widths
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-lg">
<div class="row position-relative vh-100">
<div class="col-9 col-sm-8 col-md-7 position-absolute vh-100" style="background-color: rgba(255, 128, 149, 0.5); z-index: 1;">
<p class="Left-right">Left Text</p>
</div>
<div class="col-4 col-sm-5 col-md-6 offset-8 offset-sm-7 offset-md-6 bg-primary vh-100">
<p class="text-right">Right Text</p>
</div>
</div>
</div>
The left-side background-color is setup with an alpha of 50% so you can see the overlap area.
You didn't say which version of Bootstrap you're using, so I used Bootstrap 4.
I want to achieve something like this:
Here's what, I am currently getting in Bootstrap:
I want to achieve the following:
Width ratios must be such that Sites : User : Download = 2:8:2
Sites-Banner, Sites-Search, Download-Banner, Download-Summary all should have same heights
User-Login must have combined height of Sites-Banner & Sites-Search (or Download-Banner & Download-Summary)
Heights of Sites-List, User-Operations, Download-Details must be independent and can extend as long as required.
Here's my code: Fiddle (Check Update 1)
<div>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col bg-primary">
<p id="sites-banner">Sites Banner</p>
</div>
</div>
<div class="row">
<div class="col bg-secondary">
<p id="sites-search">Sites Search</p>
</div>
</div>
<div class="row">
<div class="col bg-success">
<p id="sites-list">Sites List</p>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col bg-danger">
<p id="user-login">User Login</p>
</div>
</div>
<div class="row">
<div class="col bg-warning">
<p id="user-operations">User Operations</p>
</div>
</div>
</div>
<div class="col-2">
<div class="row">
<div class="col bg-info">
<p id="downloader-banner">Download Banner</p>
</div>
</div>
<div class="row">
<div class="col bg-light">
<p id="download-summary">Download Summary</p>
</div>
</div>
<div class="row">
<div class="col bg-dark">
<p id="download-details">Download Details</p>
</div>
</div>
</div>
</div>
</div>
I am not able to align the height of User-Login with Sites-Banner & Sites-Search [Done : Update 1]
Sites-List, User-Operations & Download-Details do not extend independently
Update 1: New Code
I got the User-Login to have combined height of Sites-Banner & Sites-Search, by wrapping them in a single row (<div class="row">)
But I am still not able to get the heights of Sites-List, User-Operations, Download-Details to be independent.
Update 2: New Code
Got the heights of Sites-List, User-Operations, Download-Details to be look independent.
But the there's lot of padding in between columns, which introduces white space in between and makes them look not aligned
Update 3: Fiddle
Although in Update 2 code it may look like that Sites-List, User-Operations & Download Details have different heights, they actually do not. They look so since we have applied background-color classes only to div element that contains the list.
For the issue regarding padding in between columns that can be solved by applying a mx-0 class attribute on the two rows, to make margin as 0
Rows have a negative margin of -15 px by default.
Checkout: Bootstrap negative margin on rows
Without mx-0 would cause a horizontal scrollbar on page. Checkout: Bootstrap columns cause horizontal scrollbar
Summary:
Treat row & col as Table's tr and td
Always put content in col
A col should necessarily have row as parent. Checkout: Bootstrap Grid Working & Guidlines
.col p{
margin: 0;
}
.user-login{
height: 100%
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Downloader</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="bg-primary">
<p>Sites-Banner</p>
</div>
<div class="bg-secondary">
<p>Sites-Search</p>
</div>
</div>
<div class="col">
<div class="bg-danger user-login">
<p>User-Login</p>
</div>
</div>
<div class="col">
<div class="bg-info">
<p>Download-Banner</p>
</div>
<div class="bg-light">
<p>Download-Summary</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="bg-success">
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
<p>Sites-List</p>
</div>
</div>
<!-- <div class="clearfix"></div> -->
<div class="col">
<div class="bg-warning">
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
<p>User-Operations</p>
</div>
</div>
<!-- <div class="clearfix"></div> -->
<div class="col">
<div class="bg-dark">
<p>Download-Details</p>
<p>Download-Details</p>
<p>Download-Details</p>
<p>Download-Details</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to add a background image for my website, using bootstrap-4 and external css (internal doesn't work for me as well).
I am trying to add image which will be behind all rows which are in a
If i try to use it for a rows inside the container it works, but i wanna the background behind all rows, not just behind one.
Could you help me with that please?
.background {
background-image: url('images/podklad.png') !important;
height: 100%;
}
#top_part {
/*background-color: #ff9900 !important;*/
}
<div class="container-fluid background" >
<div class="row" id='top_part'>
<div class="col-6" >
<div class="d-flex text-center justify-content-center align-items-baseline">
<h1>bla bla<br/>bla bla</h1>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary"><h4></h4></button>
</div>
</div>
<div class="col-6">
<img class="img-fluid" src="images/krabicka.png" alt="">
</div>
</div>
<div class="row" id='top_part'>
<div class="col-12 text-center">
<h2>bla bla</h2>
</div>
</div>
<div class="row" id='top_part'>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/lock80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/gears80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/heart80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
</div>
</div>
It seems that your code worked for me.
Here's a JSFiddle I created with example pictures. You can just replace my example images with yours. Your code correctly places the image behind the container with all of the rows.
If you want the image to be behind literally everything on the page, then change your CSS to look like this:
body {
background-image: url('images/podklad.png') !important;
background-size: cover; /* Resizes the image to cover the entire container */
}
If no image is showing up, then make sure the image paths are correct.
I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.
I tried these answers for example:
Bootstrap footer not at bottom
Flushing footer to bottom of the page, twitter bootstrap
Height not 100% on Container Fluid even though html and body are
But I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.
This is the code for my footer:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>
I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:
https://codepen.io/anon/pen/oMZVxq
Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.
You can use built-in bootstrap class to achieve this.
What you need is the container to be a column flex container . class to use are : d-flex flex-column
To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;
For the footer, a margin-top:auto will do, the class to use is : mt-auto;
example below to run in full page mode
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
Link1
</li>
<li class="nav-item">
Link2
</li>
<li class="nav-item">
Link3
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
Forgot Password?
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
codepen updated https://codepen.io/anon/pen/PBpgNN
reminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/
If you want a fixed footer, just add the class fixed-bottom to the footer tag like shown below.
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
First add display: flex; and flex-direction: column; to #page-container.
Now you have "set the stage" for aligning the footer to the bottom. Set its margin-top to auto (by adding the class mt-auto) and you are done;
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
See this codepen.
So this helped me - if someone is still looking for an answer:
on your <HTML>, <body> and your container div add a class h-100 and your footer will stay on the bottom.
Important
One thing I did to remove the extra height is that on my container div I changed the h-100 styling to height: calc(100% - 200px) !important; (where -200px was the height of my navigation and footer)
if you are not using the bootstrap, here is the styling .h-100{height:100% !important}