I have a sample website from this.
But i don't know how to make it "center"?
There is my code
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Mobile - Basic Pin Page Responsive</title>
<!-- Included Bootstrap CSS Files -->
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap-responsive.min.css" />
<!-- Includes FontAwesome -->
<link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css" />
<!-- Website CSS Theme Css -->
<link rel="stylesheet" href="./css/stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div id="main" class="container">
<div id="items" class="row-fluid" >
<div class="item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_04.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class="item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_07.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="author"> - John White - </div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_01.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_02.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_03.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_05.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_08.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<footer id="footer"></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/jquery.masonry.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
And css file
body {
color: #000000;
font-family: sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #CCCCCC;
}
.wrapper {}
#main {
margin-bottom: 30px;
margin-top: 55px;
}
#items {}
#items .item {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(to bottom, #F6F6F6 0%, #EAEAEA 100%) repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.05);
text-shadow: 0 1px 0 #DDDDDD;
width: 236px;
margin: 10px;
float: left;
}
#items .item .item-content {
padding: 10px;
}
#items .item .picture .description {
margin-top: 10px;
}
#items .item .meta span {
font-size: 12px !important;
line-height: 16px !important;
margin-right: 5px;
}
#items .item .picture {
display: block;
position: relative;
z-index: 5;
border-top: 1px solid #999999;
border-radius: 4px 4px 4px 4px;
}
#items .item .picture a.image {
display: block;
height: auto;
width: 100%;
}
#items .item .picture img {
border-radius: 2px 2px 0px 0px;
height: auto;
position: relative;
width: 100%;
z-index: -1;
}
.picture img {
height: auto;
width: 100%;
}
.navbar-inner {
box-shadow: 0px 5px 10px #999 !important;
}
/* RESPONSIVE CSS HACKS
-------------------------------------------------- */
#media (max-width: 768px) {
#main {
margin-top: 5px;
}
}
Can you please help me?
Thanks.
Managed to gather the details I need. Can't test it through debug of devtools because Masory need to reload to re-init the size of item. This may work
Use the class .container wrapper. So it will be cantered.
Init your mansory like this .Don't set the columnsWidth property, and use gutter instead of margin in your CSS. This is to make your items have dynamic width with CSS
jQuery(document).ready(function() {
var $container = $('#items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true,
gutter: 10
});
});
});
In your CSS .Set width to dynamic, dont use float or margin (Because you use gutter instead of margin ^above)
#items .item {
box-sizing: border-box;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(to bottom, #F6F6F6 0%, #EAEAEA 100%) repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.05);
text-shadow: 0 1px 0 #DDDDDD;
width: 20%;
}
When it come to small screen size, use #media query
#media (max-width: 768px){
#items item{
width: 50%;
}
}
Related
How can I add this icon from fontawesome and put it over this picture?
I want it to be aligned in the center of the picture.
<i class="fas fa-play-circle"></i>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex border-bottom mb-1 mt-3">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#">
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
</body>
</html>
Problem is solved and responsive Design now is properly achieved.
You just update your CSS with the following Code
.img-box{
position: relative;
min-width: 100%;
height: 100%;
display: block;
}
.icon-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
min-height: 100%;
}
.icon-box i{
font-size: 29px;
color: #fff;
}
#media(max-width: 767px){
.main-box {
flex-direction: column;
align-items: center;
}
}
And update your HTML with following
<div class="d-flex border-bottom mb-1 mt-3 main-box">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li>
<a href="#" class="img-box">
<div class="icon-box">
<i class="fas fa-play-circle"></i>
</div>
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Abhijeet John Kujur.
</div>
I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.
I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.
Code from divs:
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #EF233C;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EF233C;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #EF233C;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
color: #ffffff;
}
#media (max-width: 575.98px) {
.service .service-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.service .service-text p {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DevFolio - Developer Portfolio Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free Website Template" name="keywords">
<meta content="Free Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
<div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
<p>What I do</p>
<h2>Awesome Quality Services</h2>
</div>
<div class="row">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop"></i>
</div>
<div class="service-text">
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-text">
<h3>Apps Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-apple"></i>
</div>
<div class="service-text">
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
</body>
</html>
There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why
Gif of what happens:
I get reference from here :
https://getbootstrap.com/docs/4.0/components/jumbotron/
https://coreui.io/demo/#base/jumbotron.html
My script like this :
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card>
<b-row v-for="row in formattedClubs">
<b-col v-for="club in row" cols>
<b-jumbotron header="" lead="">
<b-link to="#">
<b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
</b-link>
<b-link href="#" class="card-header-action btn-close">
{{club.description}}
</b-link>
<p>{{club.price}}</p>
<p>{{club.country}}</p>
<div class="text-center my-3">
<b-btn variant="primary">Add</b-btn>
</div>
</b-jumbotron>
</b-col>
</b-row>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'jumbotrons',
data () {
return{
clubs: [
{id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
{id:2, description:'liverpool has salah', price:900, country:'england'},
{id:3, description:'mu fans', price:800, country:'england'},
{id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
{id:5, description:'arsenal player', price:600, country:'england'},
{id:6, description:'tottenham in london', price:500, country:'england'},
{id:7, description:'juventus stadium', price:400, country:'italy'},
{id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
{id:9, description:'barcelona in the spain', price:200, country:'spain'},
{id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
]
}
},
computed: {
formattedClubs() {
return this.clubs.reduce((c, n, i) => {
if (i % 5 === 0) c.push([]);
c[c.length - 1].push(n);
return c;
}, []);
}
}
}
</script>
<style scoped>
.jumbotron {
padding: 0.5rem 0.5rem;
}
</style>
The result view like this :
Based on the image above, it can be seen that each box has a different height. This is due to different lengths of description
How do I make it so that the height of all the boxes is the same even though the length of description is different?
You should use Cards instead of Jumbotrons, then you can simply use the card group.
https://getbootstrap.com/docs/4.0/components/card/#card-groups
They will all have the same size.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Vue-Bootstrap also supports card groups with equal size as you can see here https://bootstrap-vue.js.org/docs/components/card/#card-groups
Not used vue before but you can handle the css using flexbox.
.Wrapper {
display: flex;
flex-wrap: wrap;
}
.Item {
background: #f5f5f5;
display: flex;
flex: 0 1 180px;
flex-direction: column;
text-align: center;
margin: 10px;
padding: 5px;
border: 1px solid #ddd;
}
.ImgWrap {
position: relative;
background: #fff;
flex: 0 1 180px;
width: 100%;
display: block;
overflow: hidden;
}
.ImgWrap img {
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.Description {
flex:1;
padding: 10px 0;
font-size: 0.9em;
word-wrap: break-word;
}
.Price,
.Country {
background: #eaeaea;
border: 1px solid #ddd;
border-radius: 3px;
margin: 2px 0 10px 0;
padding: 5px;
color: #8a8a8a;
}
.Btn {
background: #20a8d8;
border: none;
border-radius: 3px;
color: #fff;
padding: 10px;
}
<div class="Wrapper">
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>This is some descriptive text.</p>
</div>
<p class="Price">800</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p> dapibus congue odio placerat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, ante ac vulputate malesuada, nunc ex lobortis.</p>
</div>
<p class="Price">800</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>Nam accumsan aliquet congue. Quisque orci tortor, ullamcorper a auctor sit amet, luctus non ante. Proin rutrum purus quis tellus pulvinar, at tincidunt odio sagittis. Nam aliquet risus sit amet suscipit dictum. Sed sed porta urna. </p>
</div>
<p class="Price">1000</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>Nam accumsan aliquet congue. Quisque orci tortor.</p>
</div>
<p class="Price">700</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non pellentesque elit, sit amet placerat nisl. Quisque hendrerit risus nisl, vel dignissim est congue in.</p>
</div>
<p class="Price">600</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
</div>
Just use h-100 on the Jumbotron...
<b-col v-for="club in row" cols>
<b-jumbotron header="" lead="" class="h-100">
<b-link to="#">
<b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
</b-link>
<b-link href="#" class="card-header-action btn-close">
{{club.description}}
</b-link>
<p>{{club.price}}</p>
<p>{{club.country}}</p>
<div class="text-center my-3">
<b-btn variant="primary">Add</b-btn>
</div>
</b-jumbotron>
</b-col>
This is all that is needed since the cols inside the row are the same height (based on the height of the tallest). Bootstrap 4 uses flexbox.
I made a simple page using Bootstrap 4 with a contact form and would like the button to be aligned to the bottom right, rather than bottom middle, of it. How can I accomplish this?
Here's the HTML of the form:
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
</div>
</div>
And the CSS applied to buttons and form elements:
.form-control {
width: 50%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text], input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}
Use this code for button:
<div class="bt-btn">
<button type="submit" class="btn btn-dark">Send</button>
</div>
CSS:
.bt-btn {
margin: 0 auto;
text-align: right;
width: 50%;
}
button {
margin-top: 1em;
margin-bottom: 2em;
float: right;
margin-right: 25%;
}
#contact { max-width: 960px; margin: 0 auto; }
form { padding: 75px 25px; }
I would also recommend adding a container around it and give it a max-width of 960px. The whole form area.
You just use d-flex class nothing else and no need to use inline CSS
<div class="d-flex flex-row-reverse">
<button type="submit" class="btn btn-dark" >Send</button>
</div>
That's it.
<div class="form-group col-md-12 text-right mt-2">
<button type="submit" class="btn btn-primary pl-4 pr-4">Submit</button>
</div>
You could do something like.
button {
margin-right: 25%;
float : right;
}
Working example:
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-family: "Playfair Display", serif;
padding-top: 0.5em;
}
h2, h5 {
text-transform: uppercase;
/* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding */
padding: 0.5em 0;
margin: 0;
}
.about p {
padding: 0 4em 2em 4em;
margin: 0;
text-align: left;
}
.nav-link {
text-transform: uppercase;
color: white;
}
.nav-link:hover {
color: white;
}
.hero-image {
background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
/* Resizes background image to fill entire container */
background-size: cover;
position: relative;
}
.about {
background-color: WhiteSmoke;
}
.portfolio {
background-color: LightGrey;
}
.contact {
background-color: WhiteSmoke;
}
/* Removes white space from sides of each column */
.col {
padding: 0;
}
.footer {
position: bottom;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 0.75rem;
background-color: grey;
}
.footer-tag {
color: white;
text-align: left;
padding: 15px;
}
.fab {
float: right;
padding: 10px;
color: white;
}
.fab:hover {
color: #4d4d4d;
}
.form-control {
width: 50%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text], input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
margin-right: 25%;
float : right;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
<div class="hero-text text-white">
<h1>Name</h1>
<h5>Web developer</h5>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<button class="btn btn-dark">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row">
<div class="col">
<div class="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="row">
<div class="col">
<div class="portfolio">
<h2>Portfolio</h2>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
</div>
</div>
</section>
</div> <!-- End of container-fluid -->
<div class="footer">
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-github fa-2x"></i>
<i class="fab fa-codepen fa-2x"></i>
<div class="footer-tag">
<p>Created by Name.</p>
</div>
you need to make the width of your form 50% with margin:auto to keep it centered , and the inputs inside it 100% to fill the width of the form, wrap you button in a form-group and add text-align:right to it, this will keep the responsiveness ,
here's a fiddle : https://jsfiddle.net/takius/j730vdmp/21/
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-family: "Playfair Display", serif;
padding-top: 0.5em;
}
h2,
h5 {
text-transform: uppercase;
/* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding */
padding: 0.5em 0;
margin: 0;
}
.about p {
padding: 0 4em 2em 4em;
margin: 0;
text-align: left;
}
.nav-link {
text-transform: uppercase;
color: white;
}
.nav-link:hover {
color: white;
}
.hero-image {
background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
/* Resizes background image to fill entire container */
background-size: cover;
position: relative;
}
.about {
background-color: WhiteSmoke;
}
.portfolio {
background-color: LightGrey;
}
.contact {
background-color: WhiteSmoke;
}
/* Removes white space from sides of each column */
.col {
padding: 0;
}
.footer {
position: bottom;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 0.75rem;
background-color: grey;
}
.footer-tag {
color: white;
text-align: left;
padding: 15px;
}
.fab {
float: right;
padding: 10px;
color: white;
}
.fab:hover {
color: #4d4d4d;
}
.form-control {
width: 100%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text],
input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}
form {
width: 50%;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
<div class="hero-text text-white">
<h1>Name</h1>
<h5>Web developer</h5>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<button class="btn btn-dark">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row">
<div class="col">
<div class="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed
justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales
eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas
in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="row">
<div class="col">
<div class="portfolio">
<h2>Portfolio</h2>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<div class="form-group" style="text-align:right;">
<button type="submit" class="btn btn-dark">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- End of container-fluid -->
<div class="footer">
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-github fa-2x"></i>
<i class="fab fa-codepen fa-2x"></i>
<div class="footer-tag">
<p>Created by Name.</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I have a problem with aligning icons inside the sidebar. I want to have a few social icons in right-bottom corner of a sidebar.I tried using margins but it looks horrible and ugly.
Here's an example in JSBin (please resize the window to at least 1000px).
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: tomato;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
}
ul li {
margin: 0 auto;
line-height: 50px;
list-style: none;
text-align: right;
margin-right: 20px;
}
ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
color: tomato;
}
.hi {
margin-right: 20px;
text-align: right;
color: rgba(0, 0, 0, 0.4);
}
.content {
padding: 2% 4% 2% 4%;
color: rgba(0, 0, 0, 0.4);
background-color: #F2F0F1;
}
#fixedbutton {
position: fixed;
top: 0px;
right: 0px;
}
.sidebar-bottom-wrap {
position: absolute;
bottom: 60px;
right: 40px;
max-width: 200px;
}
.icons-sidebar-unit {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: baseline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRZEMO PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="container">
<div class="row">
<div class="col-md-3 sidebar"><div class="foto">
<img src="pic.png" class=" img-responsive img-circle " alt="pic">
</div>
<h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>
<!-- MENU -->
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<!-- footer ICONS -->
<footer>
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
<i class="fa fa-twitter-square"></i>
</a>
<a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
<i class="fa fa-facebook-square"></i>
</a>
<a title="" href="#" class="icons-sidebar-unit">
<i class="fa fa-google-plus-square"></i>
</a>
<a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
<i class="fa fa-youtube-square"></i>
</a>
</div>
<div class="copyright">
Copyright © 2017. Designed by
<a href=http://www.uiueux.com>wwwS</a>.
</div><!--End copyright-->
<!--
<i class="fa fa-linkedin A " aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
-->
</div>
</footer>
<!-- MAIN -->
<div class="col-md-9 col-md-offset-3 content">
<h2 id="about">ABOUT ME</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
<div class="container-fluid">
<h2 id="projects">RECENT PROJECTS</h2>
<div class="row">
<div class="col-md-9">
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="1.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="2.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="3.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="4.png" alt="" class="img-responsive img-thumbnail">
</div>
</div>
</div>
</div>
<br>
SKILLZ:<br>
HTML 5 - PRO <br>
CSS 3 - PRO <br>
JS - NOOB <br>
JQUERY - NOOB<br>
SASS - MAD <br>
GRUNT - GOD
<hr>
<h2 id="contact">CONTACT</h2>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<textarea class="form-control" id="" name="">message</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label" for="singlebutton"></label>
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
</div>
</div>
</fieldset>
</form>
<img src="qrcode1.png" class="img-responsive center-block" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The easiest way is probably to absolutely position them .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output
You could also use flexbox. Make the sidebar a column flex container, set the footer to flex-grow: 1 so that it extends to the bottom of the sidebar, put the social icons at the bottom by using margin-top: auto and order: 1 then align them to the right with text-align: right or align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output
To align your icons to the right, try:
.icons-sidebar-unit {
float: right;
}
Also, while looking at your code, I noticed you had a height / width set to 30px on your icon units. If this was to increase the size of the icons themselves, try:
.icons-sidebar-unit {
font-size: 30px;
}
A lot of people get confused on this one because it seems like icons should be styled like images, but they are actually styled as fonts.