I need the left block to the left side of my footer and the right block to the right side of my footer. But for some reason both are underneath. Any help would be appreciated!
I tried a few things but didnt work and chatgpt wont give me the proper solution.
Below I inserted html and css, maybe someone could help me with this, would be nice.
.mastfoot .inner {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.mastfoot .inner>div {
width: 25%;
}
.mastfoot .inner>div>a {
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
}
.mastfoot .inner>div>a {
display: block;
}
.mastfoot .inner>div {
padding: 10px;
}
.d-flex {
display: flex;
flex-direction: column;
}
.btnfooter {
display: block;
margin-bottom: 5px;
}
.left-block {
justify-content: flex-start;
}
.right-block {
justify-content: flex-end;
}
<footer class="mastfoot mt-auto">
<div class="inner d-flex justify-content-between">
<div class="d-flex left-block">
<div>
<h4>Left Block</h4>
</div>
<div>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
</div>
</div>
</div>
<div class="inner d-flex justify-content-between">
<div class="d-flex right-block">
<div>
<h4>Right Block</h4>
</div>
<div>
<a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
</div>
</div>
</div>
</footer>
Related
I have 4 divs aligned horizontally from left to right. Each div is 25% width of the screen.
I need to make them wrap when the user minimizes the screen instead of glitching above each other.
.MenuSett {
margin-top: 10px;
width: 100%;
position: relative;
height: 120px;
color: #0ddF00;
display: inline-block;
}
.m1 {
width: 25%;
margin: auto;
text-align: center;
float: left;
}
<div class="MenuSett">
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
</div>
Below that div there is
.belowDiv {
position: relative;
height:350px;
}
How to push it down when the div above wraps ?????
if you want them to be below each other you display flex in parent with flex-direction: row; and media queries change flex-direction to column
flex-direction: column;
.MenuSett{
margin-top:10px ;
width: 100%;
position: relative;
height: 120px;
color: #0ddF00;
display: flex;
flex-direction: row;
}
.m1 {
width: 25%;
margin: auto;
text-align: center;
float: left;
}
#media only screen and (max-width: 600px) {
.MenuSett{
flex-direction: column;
}
}
You can add Flexbox to .MenuSett and use flex-wrap: wrap to get its children to go onto a new line at smaller viewport widths.
Note that you would need to set an absolute value for the width, such as 250px. This is because with width: 25%, regardless of the viewport width, the children will always be 25% of its parent, thus always displaying them on one row.
.MenuSett {
margin-top: 10px;
width: 100%;
position: relative;
height: 120px;
color: #0ddF00;
/* Introduce Flexbox to parent */
display: flex;
/* Allow children to wrap to the next line */
flex-wrap: wrap;
}
.m1 {
/* At larger viewports, children will be 25% of parent */
width: 25%;
/* At viewports smaller than ~1000px, children will start
wrapping because they have a minimum width set. Change
this value as needed. */
min-width: 250px;
margin: auto;
text-align: center;
float: left;
}
<div class="MenuSett">
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
<div class="m1">
<p>This content is ok</p>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
</div>
</div>
I would use flex:
.MenuSett{
margin-top:10px;
width: 100%;
position: relative;
height: 120px;
color: #0ddF00;
display: inline-block;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.m1 {
flex: 1;
margin: auto;
text-align: center;
float: left;
}
The parent .MenuSett would have display: flex;, flex-direction: row; & flex-wrap: wrap; and the children .m1 would have flex: 1 and without the width set.
But you might also do some media queries as at some minimal screen width having 4 columns at the same time could be too much. Like this ones:
#media screen and (max-width: 500px) {
.m1 {
flex: 1 0 100%;
}
}
#media screen and (min-width: 700px) {
.m1 {
flex: 1 0 50%;
}
}
#media screen and (min-width: 900px) {
.m1 {
flex: 1 0 25%;
}
}
I want too make both buttons a different collor
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
</div>
</div>
</header>
this is the code I use, But if I change the color both buttons will change and not 1.
What it is now
what I want
You can inline style for change background for the particular button
.btn {
display: inline-block;
border: 2px solid transparent;
letter-spacing: .5px;
line-height: inherit;
border-radius: 0;
text-transform: uppercase;
width: auto;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
.btn-primary{
color: #fff;
background-color: #286090;
padding: 10px; 5px;
}
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" style="background:#ccc;"href="#services">Werkzaamheden</a>
</div>
</div>
</header>
Use :nth-of-type(2) to select the second btn and you can change any css property you want.
.intro-text .btn {
background: #333;
}
.intro-text .btn:nth-of-type(2) {
background: white;
color: black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
</div>
</div>
</header>
simply give an ID to tag so that it can be identified uniquely
#black{
background-color: black;
display: block;
}
#brown {
background-color: brown;
display: block;
}
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
<a id="black" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
<a id="brown" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
</div>
</div>
</header>
`
Add to classes. One general for all the a tags. And one for the :first-of-type
.intro-text a:first-of-type{
background-color: red;
color: white;
display: block;
}
.intro-text a {
background-color: blue;
color: white;
display: block;
}
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
</div>
</div>
</header>
You can use those classes available in Bootstrap buttons as example below or create your own classes.
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
<a class="btn btn-default btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
<a class="btn btn-warning btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
</div>
</div>
</header>
I have 3 <a> with the btn bootstrap class on it.
I found how to center those horizontally and vertically with the above code
HTML
<div class="row row-centered ">
<div class="vertically-centered">
<div class="col-xs-12 col-sm-12">
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 100px; margin-right: 100px;">Handover</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a>
</div>
</div>
</div>
CSS
.btn-lg{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 10px;
padding-right:10px;
}
.row-centered {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a;
}
.row-centered:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.vertically-centered {
vertical-align: middle;
display: inline-block;
width: 100%;
}
.col-centered {
display: inline-block;
float: none;
}
It works as expected when the screen is wide enough
But it is failing when the screen is smaller (width) than 830px
EDIT
I change the HTML and CSS
HTML MODIFIED
<div class="row row-centered ">
<div class="vertically-centered">
<div class="col-xs-12 col-sm-4 col-md-4">
<a class="btn btn-lg btn-default btn-primary" href="#">Prepare</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<a class="btn btn-lg btn-default btn-primary" href="#">Handover</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<a class="btn btn-lg btn-default btn-primary" href="#">Tuto</a>
</div>
</div>
</div>
CSS MODIFIED
.btn-lg{
padding-top:30px;
padding-bottom:30px;
width:100%;
}
.row-centered {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a;
}
.row-centered:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.vertically-centered {
vertical-align: middle;
display: inline-block;
width: 100%;
}
.col-centered {
display: inline-block;
float: none;
}
Now my problem is that I button are aligned above each other (which is nice) but they are going under my nav-background
Change the margin on the middle button to a percentage value:
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 5%; margin-right: 5%;">Handover</a>
I think it is because you use a margin before and after the middle link. What I try to do is solve it with empty columns
<div class="row row-centered ">
<div class="vertically-centered">
<div class="col-xs-12 col-sm-12">
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Handover</a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a>
<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a>
</div>
</div>
</div>
The problem was that the nav was a custome class instead of the navbar class from boostrap
I am creating a gallery website my goal is the show option button on bottom of the picture when use hover over it.
Here is an example of what I want on pixabay
<div class="image-thumbnail col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
<div class="image-options">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm ">
<i class="fa fa-thumbs-up"></i>
</button>
<button type="button" class="btn btn-sm ">
<i class="fa fa-thumbs-down"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-facebook"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-google-plus"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-twitter"></i>
</button>
</div>
</div>
</div>
CSS
div.image-thumbnail div.image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
div.image-thumbnail div.image-options:hover {
display: inline;
}
Any ideas ?
EDIT:
It turns out that
div.image-thumbnail div.image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
Don't work at all as the image-options are still visible even with display:none
You can't hover element with display: none, it's not visible. Instead you should define :hover rule on .image-thumbnail element:
.image-thumbnail {
position: relative;
}
.image-thumbnail .image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
.image-thumbnail:hover .image-options {
display: inline;
}
As stated in my comment.
div.image-thumbnail div.image-options:hover {
display: inline;
}
This is saying when we hover over div.image-options display it... This isn't possible. (As you have it set to display: none) plus this is not the element you want to set the hover on.
What you mean to say is
div.image-thumbnail:hover div.image-options {
display: inline;
}
When we hover over div.image-thumbnail then show div.image-options.
I'd really appreciate some help on an issue i'm having.
For reference: http://trs-studios.com/test
I'm trying to get the 3 boxes (side to side) to align to the center of the page.
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> MEDIA</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> STUDIO</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> DESIGN</a>
</div>
Css for wrapper
.wrapper {
padding-top: 100px;
text-align: center;
}
Css for spacer
.spacer {
display: inline;
margin: 50px 50px;
position: relative;
text-align: center;
}
I'd appreciate any help!
Forget those spacing divs, HTML is not for styling.
Using display: inline-block on your links, you can simply put margin on them.
HTML:
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">MEDIA</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">STUDIO</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">DESIGN</a>
</div>
CSS:
.wrapper {
text-align: center;
}
.wrapper .btn {
display: inline-block;
margin: 50px 25px;
}
Working demo