I am having trouble with a button and footer in my app.
I am trying to style it so the button sits on the footer when in the mobile platform like [mobile][1].
and then when in desktop platforms the button moves to the left with this blue border, like [desktop][2]
See links to images at the bottom.
My code is as below:
.btn-default-finish {
border-radius: 4px;
height: 48px;
background-size: cover;
color: #002b80;
}
footer {
background-color: #0032a0;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 114px;
}
<div class="col-sm-6">
<a href="{{ path('confirm-booking') }}" class="btn btn-default-finish btn-lg btn-block mt-10" type="button">
<ion-icon name="checkmark-circle"></ion-icon>Make booking</a>
</div>
<footer>
<div class="row" id="footer-details">
</div>
</footer>
HTML
<footer>
<div class="col-sm-12 col-lg-3 pull-right col-md-3 col-xs-12">
<a href="{{ path('confirm-booking') }}" class="btn btn-default-finish btn-lg btn-block mt-10" type="button">
<ion-icon name="checkmark-circle"></ion-icon>Make booking</a>
</div>
<div class="row" id="footer-details">
</div>
</footer>
CSS
.btn-default-finish {
border-radius: 4px;
height: 48px;
background-size: cover;
color: #002b80;
}
footer {
background-color: #0032a0;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 114px;
}
Related
IOS displays hero images really pixeladed and zoomed in, while other os and browsers other than safari are fine... help!
Not sure how to go about it... Can I fix it through css or just not have a hero slider in the site in order to keep the UX/UI up?
This is my html
<section id="hero">
<div class="container-fluid hero-container">
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="5000" style="background-image: url(/assets/img/hero/clouds.jpg); background-position: center bottom">
<div class="carousel-container">
<div class="carousel-caption dark">
<div class="hero-content-container">
<div class="carousel-header animate__animated animate__fadeInDown">I am an explorer</div>
<div class="carousel-content animate__animated animate__fadeInUp animate__delay-1s">I love to explore and discover new skills, like a new programming language, or a new real language!</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="5000" style="background-image: url(/assets/img/hero/buildings-bottom.jpg); background-position: center bottom">
<div class="carousel-container">
<div class="carousel-caption dark">
<div class="carousel-header animate__animated animate__fadeInDown">I am a problem solver</div>
<div class="carousel-content animate__animated animate__fadeInUp animate__delay-1s">From software and hardware to welding up a new design, I love solving problems that come along with creating</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="5000" style="background-image: url(/assets/img/hero/printer-hero.jpg); background-position: center top">
<div class="carousel-container">
<div class="carousel-caption">
<div class="carousel-header animate__animated animate__fadeInDown">I love to create</div>
<div class="carousel-content animate__animated animate__fadeInUp animate__delay-1s">Designing and creating new and clever things has been a passion for me all my life</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div id="about"></div>
</section>
And this is the Css
.hero-container {
width: 100%;
height: 100vh;
padding: 0;
overflow: hidden;
margin-top: 0;
}
.carousel-container {
display: flex;
justify-content: center;
}
.carousel-item {
/* width: 100%; */
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
/* position: relative; */
transition: 0.5s;
background-attachment: fixed;
}
.hero-content-container {
margin: 0;
}
.carousel-caption {
top: 50%;
transform: translateY(-50%);
margin: 0px;
padding: 0px;
}
.dark {
color: #313131;
}
.carousel-header {
font-family: "Oxygen", sans-serif;
font-size: 70px;
top: 50%;
transform: translateY(-50%);
margin-bottom: 0px;
}
.carousel-content {
font-family: "Oxygen", sans-serif;
font-size: 25px;
margin-top: 0px;
}
#media (max-width: 500px) {
.carousel-header {
font-size: 40px !important;
}
.carousel-content {
font-size: 15px !important;
}
}
#media (max-width: 800px) {
.carousel-header {
font-size: 55px;
}
.carousel-content {
font-size: 25px;
}
}
What it should look like
What it looks like on safari / IOS (apple)
I am trying to implement the following header design in Bootstrap.
I tried using the grid system but this does not feel like it should be the way to go. The code I have so far does not place the 2 buttons in the right lower corner in the correct position.
The HTML:
<div class="row">
<div class="col-sm-12 mb-3">
<div class="line"></div>
<div class="row">
<div class="col-sm-3 pt-4 pl-5">
<img src="logo.png" class="logo" />
</div>
<div class="col-sm-5"></div>
<div class="col-sm-4">
<a class="btn btn-primary" href="#" role="button">choice 1</a>
<a class="btn btn-primary" href="#" role="button">choice 2</a>
</div>
</div>
</div>
</div>
The CSS:
.line {
position: relative;
}
.line::after {
content: "";
background-color: #ed1e79;
position: absolute;
width: 100%;
height: 20px;
top: 90px;
left: 0px;
z-index: -1;
}
.btn {
border-radius: 0 !important;
}
The line shouldn't be an element in your markup. It should be a background image or a pseudo-element on an existing container element. You can then use Bootstrap's flex structure and align the two buttons vertically at the end of the column.
.bg-line {
background-image: linear-gradient(180deg,
transparent calc(50% - 6px),
#ff0000 calc(50% - 6px),
#ff0000 calc(50% + 6px),
#ffffff calc(50% + 6px));
}
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>
<div class="bg-line d-flex justify-content-between align-items-end">
<div class="col"><!-- flexes to fill space -->
<img src="https://via.placeholder.com/90" class="logo" />
</div>
<div class="col-auto btn-group"><!-- shrinks to fit content -->
<a class="btn btn-primary btn-sm" href="#" role="button">choice 1</a>
<a class="btn btn-secondary btn-sm" href="#" role="button">choice 2</a>
</div>
</div>
Fiddle demo
using flex - d-flex, align-items - align-items-end and justify-content - justify-content-between it should work.
example in CSS:
header {
margin: 10px;
display: flex;
justify-content: space-between;
border: solid 2px black;
padding: 10px;
align-items: flex-end;
}
.img {
height: 100px;
width: 100px;
border: solid 2px black;
border-radius: 50%;
}
.btns {
height: 20px;
width: 150px;
border: solid 2px black;
}
<header>
<div class="img"></div>
<div class="btns"></div>
</header>
I would like to display dummy images in a row next to each other as shown in this:
As I am not so good with CSS I was wondering how to do this in a proper manner? The pictures I have are all statically served, none of this has to be dynamic, or sliding, or anything, just displaying and scaling up responsively
Thank you for your input
Tried around with position absolute and relative, but was weirdly positioned all over the place. I'm using Bootstrap 4 in this project
You can try this:
body {
background: #20262E;
}
div {
margin: 10px;
padding: 10px;
background: #ffffff;
}
img {
width: 24%;
border-radius: 50%;
}
<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>
And if you want the green tick with image follow this:
body {
background: #20262E;
}
#image-gallery {
margin: 10px;
padding: 10px;
background: #ffffff;
}
.image-box{
display: inline-block;
position: relative;
width: 24%;
}
img {
width: 100%;
border-radius: 50%;
}
.green-tick {
position: absolute;
bottom: 10%;
right: 10%;
border-radius: 50%;
color: #ffffff;
background: #00ff00;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />
<div id="image-gallery">
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
<i class="fa fa-check green-tick"></i>
</div>
<div class="image-box">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
<i class="fa fa-check green-tick"></i>
</div>
</div>
So this is a bit puzzling.
.features {
margin-top: 10px;
min-height: 400px;
border: 1px solid #8C8C8C;
border-radius: 7px;
color: #4A4A4A;
overflow: hidden;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="features">
<p class='new-question'>Placeholder text</p>
<div class='row'>
<div class='bottom-right'>
<button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
<button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>
</div>
</div>
</section>
I just want the buttons to be displayed in a row at the bottom right of the feature section. But instead of doing that, they completely overshoot the section. Any ideas why?
This is what it looks like right now (ignore the text, I generated it with js):
Add position: relative to .features.
Whenever you wants to move child element with position: absolute according to parent then adding position: relative to parent is necessary.
For Absolute Position:
The element is positioned relative to its first positioned (not static) ancestor element
.features {
margin-top: 10px;
min-height: 400px;
border: 1px solid #8C8C8C;
border-radius: 7px;
color: #4A4A4A;
overflow: hidden;
position: relative;
}
.bottom-right{
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="features">
<p class = 'new-question'> Placeholder text</p>
<div class = 'bottom-right'>
<button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
<button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>
</div>
</section>
set .features to position:relative
.features {
margin-top: 10px;
min-height: 400px;
border: 1px solid #8C8C8C;
border-radius: 7px;
color: #4A4A4A;
overflow: hidden;
position:relative;
}
.bottom-right{
position: absolute;
bottom: 0;
right: 0;
}
<section class="features">
<p class = 'new-question'> Placeholder text</p>
<div class='row'>
<div class = 'bottom-right'>
<button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
<button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>
</div>
</div>
</section>
Missing position:relative on parent element
.features {
margin-top: 10px;
min-height: 400px;
border: 1px solid #8C8C8C;
border-radius: 7px;
color: #4A4A4A;
overflow: hidden;
position:relative;
}
.bottom-right{
position: absolute;
bottom: 0;
right: 0;
}
<section class="features">
<p class = 'new-question'> Placeholder text</p>
<div class='row'>
<div class = 'bottom-right'>
<button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
<button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>
</div>
</div>
</section>
That's what position absolute does, you position an element relative to the next parent element with relative or absolute positioning. It will go all the way back to the html element itself meaning it will be placed relatively to the page itself if there is no such parent.
So you need to add position relative to one of his parent, in your code you want to add it to the section features.
.bottom-right{
position: absolute;
bottom: 0;
right: 0;
}
This code worked for me but when I wanted to place a few of them around my website, they all ended up above the fold, on top of each other. To prevent that, I wrapped each section (including the bottom-right div) in a container, like this:
<section id="contact">
<div class="container">
<div class="card">...{my code}...</div>
<div class="bottom-right">...</div>
</div>
</section>
As you can see the steps in image are not centered well. May be someone has some suggestions how to center it properly ?
CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
HTML:
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
FIDDLE
I'm assuming you're talking about the horizontal distance between the steps not being of equal size. This is due to the text of the step, e.g. Uploading, being part of the table cell. The width of the table is distributed to the table cells based on the width of their contents, a cell with more text will therefore become wider than one with less text.
The easiest way to solve this might be to take the text of the step outside of the document flow by giving it a position: absolute, width: 100% and text-align: center.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
.stepwizard-step p {
position: absolute;
width: 100%;
text-align: center;
}
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
go by this code it may work out
html
<div class="stepwizard">
<div class="stepwizard-row row">
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
css code
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard {
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
text-align: center;
position: relative;
/*width: 70px*/
}
jsfiddle
change only stepwizard-row:before top 14px to 18px it's center vertically.