I'm trying to get a navigation that pushes both div containers on the right side, under the navigation when you go into smartphone view. I try it with Display:flex
however I get this spacing left and right. How can I get rid of that
.container-div {
display: flex;
width: 500px;
background-color: rgb(176, 243, 221);
}
.container-div div {
flex-basis: 50%;
}
<div class="container-div">
<div class="col-md-2 d-flex justify-content-center header-phone">
<i class="fa fa-phone fa-3x"></i>
<div class="col text-center ">
<h5>Rufen Sie uns an</h5>
<h5>+49 7433 2106989</h5>
</div>
</div>
<div class="col-md-2 d-flex justify-content-center header-mail">
<h5 class="col-4 d-flex justify-content-center text-center">Kontakt</h5>
</div>
</div>
</div>
Related
I am using Bootstrap 5 to create a two-column page using Cards, where the cards extend to the bottom of the page. This part is working fine.
Inside the right-hand Card are two Columns. The first column has a border along the right edge to visually separate the two.
Regardless of the height of the content inside the column, I want the border to extend to the bottom of the parent Card.
HTML
<div class="row">
<div class="col-2 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
Menu items
</div>
</div>
<div class="col-10 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
<div class="row">
<div class="col-2 flex-fill" style="border-right: 1px solid black;">
first column - the border line should extend to the bottom of the parent card
</div>
<div class="col-10 flex-fill">
second column
</div>
</div>
</div>
</div>
</div>
Here you go...
Use pseudo element ::before, see the snippet below.
.left_border::before {
content: '';
position: absolute;
width: 1px;
height: calc(100% - 32px); /* padding-top is 16px and padding-bottom is 16px (2 * 16px = 32px). */
display: block;
background: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-2 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
Menu items
</div>
</div>
<div class="col-10 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
<div class="row">
<div class="col-2 flex-fill">
first column - the border line should extend to the bottom of the parent card
</div>
<div class="col-10 flex-fill left_border">
<div class="ms-3">
second column
</div>
</div>
</div>
</div>
</div>
</div>
border right will only span the width or height of the element its applied to. Try inserting a hr element in between the columns or at the end/start of the 2.
https://www.w3schools.com/howto/howto_css_vertical_line.asp
I'm trying to create three vertical dots and align the bottom left of my container with css and bootstrap 5. exactly like the pic below:
my HTML and CSS:
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
background: linear-gradient(90deg, #76b3fe, #8680e4);
}
.selected-dot {
height: 20px;
width: 20px;
background: #97cdfe;
}
<section class="slider-bg-1 d-flex align-items-end">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
<h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
<h6 claas="caption-text-color">Get your freebie template now</h6>
<div class="d-lg-flex">
<div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
<img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
</div>
</div>
</div>
<span class="dot selected-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</section>
this is my output
how can i align the vertically and move them to bottom left of container? because when i use div for wrapping they disappear
1st: wrap the dots in a container. I used a section with the class: .dot-wrapper.
2nd: give the wrapper a width: min-content;. With that, it will only be as wide as the seclected dot.
3rd: to cenetr the dots, give them a margin left and right of auto;
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
background: linear-gradient(90deg, #76b3fe, #8680e4);
margin: 5px auto;
}
.selected-dot {
height: 20px;
width: 20px;
background: #97cdfe;
}
.dot-wrapper {
width: min-content;
}
<section class="slider-bg-1 d-flex align-items-end">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
<h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
<h6 claas="caption-text-color">Get your freebie template now</h6>
<div class="d-lg-flex">
<div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
<img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
</div>
</div>
</div>
<section class="dot-wrapper">
<div class="dot selected-dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</section>
</section>
it's quite easy, you can wrap the dots with a div container like this
<!--Column Dots -->
<div class="dot-container">
<span class="dot selected-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
and style the container as below
.dot-container{
width: 15px;
display: flex;
flex-direction:column;
align-items:center;
}
and for better styling. give dot class some amrgin like margin: 3px 0;
here is a codpen : https://codepen.io/shammlo/pen/QWKggNX?editors=1100
I am doing a simple page with a bootstrap grid and I am having some problems with placing the middle row occupying the full height in the middle.
These are the 3 rows: page
I want to place the row with the logo in the middle, but I am having problems with it. I placed height: 100%;, height: auto;. I even placed the container height to 100% and auto and nothing works!
I think there is a concept about bootstrap heigh that I am missing, because its the heigh that I have problems
html:
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-2">
<img id="menuIcon" (click)="toggleRightSidenav()" onmouseover="this.src='../../../assets/Images/generic/menuIcon_hover.png'" src="/assets/Images/generic/menuIcon.png" onmouseout="this.src='/assets/Images/generic/menuIcon.png'">
</div>
<div class="col-md-10 col-8">
</div>
<div class="col-md-1 col-2">
<img id="helpIcon" routerLink="/guide" onmouseover="this.src='../../../assets/Images/home/helpIconHover.png'" src="/assets/Images/home/helpIcon.png" onmouseout="this.src='/assets/Images/home/helpIcon.png'">
</div>
</div>
<div class="row row align-items-center mh-100" >
<div class= "col-md-12">
<img id="logo" src="/assets/Images/home/Logo.png">
</div>
</div>
<div class="row align-items-center justify-content-around fixed-bottom">
<div class="col-md-2 col-sm-2">
<img id="addButton" routerLink="/addPlayer" onmouseover="this.src='../../../assets/Images/generic/addIcon_hover.png'" src="../../../assets/Images/generic/addIcon.png" onmouseout="this.src='/assets/Images/generic/addIcon.png'" />
</div>
<div class="col-md-2 col-sm-2">
<p>Players Waiting: {{playerWaiting}} </p>
</div>
<div class="col-md-2 col-sm-2">
<p>Listed Players: {{playersListed}}</p>
</div>
<div class="col-md-2 col-sm-2">
<img id="searchButton" routerLink="/search" onmouseover="this.src='../../../assets/Images/generic/searchIcon_hover.png'" src="../../../assets/Images/generic/searchIcon.png" onmouseout="this.src='/assets/Images/generic/searchIcon.png'" />
</div>
</div>
</div>
css:
div{
border: yellow 1px solid;
}
#menuIcon{
width: 100%;
height: auto;
}
#helpIcon{
width: 100%;
height: auto;
}
#addButton{
width: 100%;
height: auto;
max-width: 127px;
}
#searchButton{
width: 100%;
height: auto;
max-width: 127px;
}
https://www.codeply.com/p/Xd0xi5hFNc
Couple of things.
To be able to fill several rows, you'd need a height for the container div.
Current HTML
<div class="container-fluid">
Update as
<div class="container-fluid d-flex vh-100 flex-column">
Now you can easily make your middle div fill the remaining gap by adding a fill-height class.
Current HTML
<div class="row row align-items-center mh-100" >
Update as
<div class="row row align-items-center fill-height">
Add this to your css
.fill-height {
flex: 1;
}
.fixed-bottom {
position: sticky;
}
jsFiddle
I have a specific layout that I want to achieve on my web page, namely:
The layout in the above image is built with the following HTML and bootstrap classes:
<div className="ContentWrapper d-flex mh-100 flex-row h-100">
<div className="ContentBody flex-column flex-fill">
<div className="ContentHeader p-3 w-100">
<h2>Header</h2>
</div>
<div className="ContentMain w-100">
<h2>Scrollable div, should fill height, but not more than that</h2>
</div>
</div>
<div className="Sidebar h-100">
<h2>Sidebar content</h2>
</div>
</div>
Relevant CSS:
.ContentWrapper {
background-color: red;
}
.ContentBody {
background-color: blue;
}
.ContentHeader {
background-color: yellow;
}
.ContentMain {
background-color: purple;
flex: 1;
}
.Sidebar {
background-color: green;
width: 500px;
}
However, when there is too much content in the purple part, the component starts to increase in height. I wish to prevent that and have a scrollbar in the purple component.
Furthermore, I heard that some flex properties work different in Chrome and Firefox. The idea is that I want my web page to have the same behavior in both browsers.
You can remove h-100 on ContentWrapper and add height: 100vh to it. Make your ContentBody a flexbox by adding `d-flex- class. See demo below with explanations:
.ContentWrapper {
background-color: red;
height: 100vh; /* ADDED */
}
.ContentBody {
background-color: blue;
}
.ContentHeader {
background-color: yellow;
}
.ContentMain {
background-color: purple;
flex: 1;
overflow-y: auto; /* ADDED */
}
.Sidebar {
background-color: green;
width: 500px;
}
<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="ContentWrapper d-flex mh-100 flex-row"> <!-- removed h-100 class -->
<div class="ContentBody d-flex flex-column flex-fill"> <!-- added d-flex class -->
<div class="ContentHeader p-3 w-100">
<h2>Header</h2>
</div>
<div class="ContentMain w-100">
<h2>Scrollable div, should fill height, but not more than that</h2>
</div>
</div>
<div class="Sidebar h-100">
<h2>Sidebar content</h2>
</div>
</div>
Just find already have an answer there...
Whatever put the codepen i just finished, which i think it is a more flexbox way.
<div class="ContentWrapper d-flex mh-100 flex-row h-100">
<div class="ContentBody flex-column flex-fill d-flex">
<div class="ContentHeader p-3 w-100">
<h2>Header</h2>
</div>
<div class="ContentMain w-100 flex-fill overflow-auto">
<h2>Scrollable div
</h2>
</div>
</div>
<div class="Sidebar h-100 flex-shrink-0">
<h2>Sidebar content</h2>
</div>
</div>
https://codepen.io/ramseyfeng/pen/drWNYQ
I wanted to remove the padding from the bootstrap grid column classes.
So I did
.col-x {
padding: 0;
}
But this is kind of breaking the whole layout because a horizontal scrollbar appears.
I've created a pen for this so you can see it.
What is causing the horizontal scrollbar and how to fix it?
The .row has minus margins on them. Also the .content-fluid has padding applied to them. So you just need to add this to your CSS:
.row {
margin:0;
}
.container-fluid {
padding:0;
}
You have .row elements nested in your columns. .row has a negative margin and always needs to be wrapped in a .container, which has padding that the negative margin offsets. The padding on your columns were doing that. I would just wrap all of your rows in .container-fluid
Rows are placed within a fixed or full-width Container (.container or .container-fluid, respectively) for proper alignment.
/* removing padding on columns makes horizontal scrollbar */
.column {
padding: 0;
}
.column {
min-height: 100vh;
border-right: 1px solid #ccc;
}
.column-header {
border-bottom: 1px solid #ddd;
}
.column.sidebar {
position: fixed;
top: 0; left: 0;
border-right: 1px solid #ccc;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-2 column sidebar">
fixed side
</div>
<div class="col-6 offset-2 column content">
<div class="column-header mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-8 pt-4 pb-4 pl-5 pr-5">
Title
</div>
<div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right">
Right
</div>
</div>
</div>
</div>
</div>
<div class="col-4 column content">
<div class="column-header mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-8 pt-4 pb-4 pl-5 pr-5">
Title
</div>
<div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right">
Right
</div>
</div>
</div>
</div>
</div>
</div>
</div>