I'm wanting to add some 10px spacing between two columns and anything I have tried has made the columns start a new row.
Here is what I need:
I would like for it to be 10px between the two columns but anything I have tried so far has not helped me much and it just kept pushing one col-xs-6 onto the other row.
Here is my code:
.row {
margin-left: auto!important;
margin-right: auto!important;
}
.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
margin-bottom: 5px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
margin-top: 15px!important;
margin-bottom: 5px!important;
}
.visible-xs {
padding: 0px!important;
}
hr {
margin-top: 10px!important;
margin-bottom: 0px!important;
margin-right: 15px!important;
margin-left: 15px!important;
}
#Q3,
#Q4 {
margin-top: 20px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
background-color: #F2F2F2;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
padding: 5px;
}
#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #F2F2F2;
padding-top: 20px;
font-weight: bold;
}
#appSpacing {
margin-top: 10px!important;
margin-bottom: 10px!important
}
.num {
position: absolute;
top: 5px;
left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12" id="CollabXS">
<div>COLLABORATION</div>
</div>
</div>
<div class="col-xs-6" id="YammerXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" />
<p>Yammer</p>
<span class="num">5</span>
</div>
</div>
<div class="col-xs-6" id="TeamsXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" />
<p>Teams</p>
<span class="num">6</span>
</div>
</div>
</div>
</div>
</body>
</html>
see if this helps you, i have added a parent div for your columns and added a margin right for the first item.
.row {
margin-left: auto!important;
margin-right: auto!important;
}
.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
margin-bottom: 5px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
margin-top: 15px!important;
margin-bottom: 5px!important;
}
.visible-xs {
padding: 0px!important;
}
hr {
margin-top: 10px!important;
margin-bottom: 0px!important;
margin-right: 15px!important;
margin-left: 15px!important;
}
#Q3,
#Q4 {
margin-top: 20px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
background-color: #F2F2F2;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
padding: 5px;
}
#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #F2F2F2;
padding-top: 20px;
font-weight: bold;
}
#appSpacing {
margin-top: 10px!important;
margin-bottom: 10px!important
}
.num {
position: absolute;
top: 5px;
left: 10px;
}
.parent {
display: flex;
justify-content: space-between;
}
.child {
background: #148342;
}
.child:first-child {
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12" id="CollabXS">
<div>COLLABORATION</div>
</div>
</div>
<div class="parent">
<div class="col-xs-6 child" id="YammerXS">
<div id="appSpacing">
<p>Yammer</p>
<span class="num">5</span>
</div>
</div>
<div class="col-xs-6 child" id="TeamsXS">
<div id="appSpacing">
<p>Teams</p>
<span class="num">6</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I simplified HTML and CSS to just show the two columns. Use border.
.col-xs-6 {
}
#YammerXS {
border-right: 5px solid #ffffff;
background-color: yellow;
}
#TeamsXS {
border-left: 5px solid #ffffff;
background-color: pink;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row container">
<div class="col-xs-6" id="YammerXS">
<p>Yammer</p>
</div>
<div class="col-xs-6" id="TeamsXS">
<p>Teams</p>
</div>
</div>
</body>
</html>
Try using class col-md-offset-2.
You can find suggested answers to your question here
Try the following:
<div class="col-xs-6" style=padding-left:5px >
<div class="col-xs-12" id="YammerXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" />
<p>Yammer</p>
<span class="num">5</span>
</div>
</div>
</div>
<div class="col-xs-6" style=padding-right:5px>
<div class="col-xs-12" id="TeamsXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" />
<p>Teams</p>
<span class="num">6</span>
</div>
</div>
</div>
If all you want is a space between your columns why don't you try the bootstrap class justify-content-between?
Related
i tried to css this page original page. im having a problem with position. i set part 2 (each part is number in the image) position relative, part 3 position absolute and negative margin so it can be place on top of part 2. however, it affect part 4 and i dont know how to set the text below part 3 so it appear as the design
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "gt-ultra";
}
a {
text-decoration: none;
color: #000;
}
:root {
--blue: #2c2e53;
--orange: #bd945f;
--grey: #f3f3f3;
--grey_des: #acacac;
}
body {
background: var(--grey);
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
font-family: "gt-md";
background: white;
font-weight: normal;
}
.list {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
margin-left: 424px;
text-transform: uppercase;
}
.list a:hover {
padding-bottom: 10px;
border-bottom: 5px solid var(--orange);
}
#banner {
position: relative;
}
#banner img {
width: 100%;
}
.content {
position: absolute;
top: 124px;
left: 370px;
}
.content .title {
color: var(--blue);
font-size: 46px;
text-transform: uppercase;
border: 1px solid #000;
margin-bottom: 0;
}
.content .name {
color: var(--orange);
font-size: 46px;
text-transform: uppercase;
border: 1px solid #000;
margin-bottom: 0;
padding-bottom: 0;
}
.content p {
border: 1px solid #000;
font-family: "gt-md";
margin-top: 24px;
margin-bottom: 0;
width: 562px;
}
.content button {
background: var(--orange);
color: white;
padding: 24px 34px;
border: none;
text-transform: uppercase;
margin-top: 24px;
}
.content button:hover {
cursor: pointer;
}
#catelog {
display: flex;
justify-content: center;
}
.box {
position: absolute;
margin-top: -64px;
/* width: 1286px; */
border: 1px solid #000;
background: white;
padding: 60px 120px;
display: flex;
flex-direction: column;
gap: 92px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 148px;
border: 1px solid black;
justify-content: center;
}
.item {
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item a {
margin-top: 10px;
}
.item img {
border: 1px solid #000;
}
.row:last-child {
}
.col {
display: flex;
flex-direction: column;
gap: 94px;
border: 1px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xưởng mộc giá tốt</title>
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<!-- fontawesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- font -->
<link rel="stylesheet" href="/cat_gd/page2/css/style.css" />
<!-- style css -->
<link rel="stylesheet" href="/cat_gd/page2/css/font.css" />
</head>
<body>
<header>
<img src="/cat_gd/page2/images/logo.png" alt="" />
<div class="list">
trang chủ
giới thiệu
sản phẩm
tin tức
đối tác
liên hệ
</div>
</header>
<!-- ./header -->
<section id="banner">
<img src="/cat_gd/page2/images/banner.png" alt="" />
<div class="content">
<h2 class="title">thế giới nội thất số 1 việt nam</h2>
<h2 class="name">hoàng hoan</h2>
<p>
Sứ mệnh của chúng tôi là kết hợp hài hòa giữa ý tưởng và mong muốn của
khách hàng, đem lại những phút giây thư giãn tuyệt vời bên gia đình và
những người thân yêu
</p>
<button>liên hệ ngay</button>
</div>
</section>
<!-- ./banner -->
<section id="catelog">
<div class="box">
<div class="row">
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-phong-khach.png"
alt=""
/>
Phòng khách
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-ngu.png" alt="" />
Phòng ngủ
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-bep.png" alt="" />
Phòng bếp
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-tam.png" alt="" />
Phòng tắm
</div>
</div>
<div class="row">
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-tre-em.png" alt="" />
Trẻ em
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-van-phong.png" alt="" />
Văn phòng
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-cau-thang.png" alt="" />
Cầu thang
</div>
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-do-trang-tri.png"
alt=""
/>
Đồ trang trí
</div>
</div>
</div>
</section>
<!-- ./catalog -->
<section id="about-us">
<div class="title">
<h2>sản phẩm nổi bật</h2>
<div class="line"></div>
</div>
<div class="products">
<div class="product">
<img src="" alt="" />
<h3></h3>
<div>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
</div>
</div>
</div>
</section>
<!-- Thư viện js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
crossorigin="anonymous"
></script>
<!-- Code js -->
</body>
</html>
Don't need to set position absolute for this. Just try margin top in negative value
use position:relative and z-index to take section
its responsive page. When resizing the social buttons div is wrapping.
How to prevent it, and instead make it start from the new row at the bottom in one line? Thank you.
white-space:nowrap doesn`t work
.main-footer {
width: 100%;
height: auto;
margin: auto;
padding-top: 10px;
background: #364B66;
}
.main-footer .footer-text {
padding-top: 1em;
padding-bottom: 0.5em;
width: 100%;
height: auto;
margin: auto;
text-align: center;
}
.main-footer .footer-text ul li {
list-style-type: none;
display: inline-flex;
padding-right: 10%;
}
.main-footer .footer-text ul li a {
color: gray;
text-decoration: none;
outline: none;
}
#social {
margin-right: 0%;
}
.fa {
color: gray;
padding-left: 20px;
font-size: 25px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
<!-- 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class='main-footer'>
<div class='container-fluid'>
<div class='row'>
<div class='col-lg-2 col-md-12 col-sm-12 col-xs-12'>
<div class='footer-text'>
<h1>name</h1>
</div>
</div>
<div class='col-lg-8 col-md-12 col-sm-12 col-xs-12'>
<div class='footer-text'>
<ul>
<li>Contact</li>
<li>Aviso legal</li>
<li>Seguridad</li>
<li>Privacidad</li>
<li>Politica de cookies</li>
</ul>
</div>
</div>
<div class='col-lg-2 col-md-12 col-sm-12 col-xs-12'>
<div class='footer-text'>
<div id='social'>
</div>
</div>
</div>
</div>
</div>
When resizing the social buttons div is wrapping.
How to prevent it, and instead make it start from the new row at the bottom in one line? Thank you.
nav {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
nav a {
margin-right: 10px;
white-space: nowrap;
}
<nav>
Contact
Aviso Legal
Seguridad Privacidad
Politica de cookies
</nav>
so I'm teaching myself HTML and CSS from the bottom up. I just wanted to teach myself CSS Flexbox.
I wanted to make two simple columns to start with, but for some reason they are overlapping and I dont know why.
As you can see i've just stuck padding: 0 and margin: 0 in almost everything to try and get rid of it but I cant seem to fix it, so this must be a property I haven't learnt yet
Here's the code:
http://jsfiddle.net/58cshkzy/14/
html:
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial scale = 1">
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<div class="row2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
CSS:
html,
body {
height: 100%;
padding: 0px;
width: 100%;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: 50%;
border: 1px solid blue;
padding: 0px;
height: 100%;
}
.row2 {
width: 50%;
border: 1px solid blue;
padding: 0px;
margin-right: 0px;
height: 100%;
}
.flex-item {
background-color: tomato;
padding: 0px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-size: 1em;
font-weight: bold;
text-align: center;
}
Bootstrap is also having a class called row which styles are overriding your styles.
So rename the div class from row to row1 to see the effect.
Change the class name in the css file also.
<body>
<div class="flex-container">
<div class="row1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<div class="row2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
You use bootstrap so use bootstrap classes to make this flexbox:
html,
body {
height: 100%;
padding: 0px;
width: 100%;
}
body {
margin: 0;
padding: 0px;
}
.wrap{
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 0px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-size: 1em;
font-weight: bold;
text-align: center;
}
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6 wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<div class="col-xs-6 wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
</div>
I want 3 images next to each other, but to fill the entire screen. So i have this:
.container {
position: relative;
text-align: center;
color: white;
max-width: 99%;
}
img.forside,
img.forside-1,
img.forside-2 {
opacity: 0.7;
}
img.forside:hover,
img.forside-1:hover,
img.forside-2:hover {
transition: 1s ease;
opacity: 1;
filter: brightness(70%);
}
img.forside-2 {
width: 30%;
display: inline-block;
margin-top: 2%;
}
img.forside-1 {
width: 30%;
display: inline-block;
margin-left: 2%;
margin-right: 3%;
margin-top: 2%;
}
img.forside {
width: 30%;
display: inline-block;
margin-right: 3%;
margin-top: 2%;
}
<div class="forsidebilleder">
<a href="index.php/personlig-traening"><img class="forside-1" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
</a>
<a href="index.php/individuel-programmering"><img class="forside" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
</a>
<a href="index.php/crossfit-bootcamp"><img class="forside-2" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
</a>
</div>
I know that can be written better, but I couldn't get it to work. But this way, the 3 images is perfectly next to each other with same amount of space in each side. But what I want, is to write a headline over each image, but I don't know how?
You understand the question? :) Sorry if it's a bit messy.
You can simply use flex and consider background image in order to use text over it. You may also add an overlay to control the opacity of the image :
UPDATE
Added media query for better view on mobile
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.image {
position: relative;
flex: 1;
margin: 5px;
text-align: center;
background-size: cover;
display: flex;
align-items: center;
}
.image:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
transition: 1s;
}
.image:hover::before {
background: rgba(0, 0, 0, 0.5);
}
.image p {
position: relative;
z-index: 1;
flex: 1;
color: #fff;
font-size: 18px;
}
#media all and (max-width:460px) {
.container {
flex-direction: column
}
}
<div class="container">
<div class="image" style="background-image:url(https://lorempixel.com/400/600/)">
<p>text text</p>
</div>
<div class="image" style="background-image:url(https://lorempixel.com/500/400/)">
<p>text text</p>
</div>
<div class="image" style="background-image:url(https://lorempixel.com/600/600/)">
<p>text text</p>
</div>
</div>
You may adjust margin and height like you want.
<style>
img {
width: 100%;
}
.timetable {
position: relative;
}
.content {
position: absolute;
z-index: 999999;
bottom: 0;
color: white;
padding-left: 21px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="timetable">
<div class="row">
<div class="col-md-4">
<img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="set up time" width="30%">
<div class="content">
<h3>Hello</h3>
</div>
</div>
<div class="col-md-4">
<img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="doors open" width="30%">
<div class="content">
<h3>Hello</h3>
</div>
</div>
<div class="col-md-4">
<img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="Foodtrucks" width="30%">
<div class="content">
<h3>Hello</h3>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I'm looking for a more elegant way to align the right icons with the left text vertically, as the negative margin might be a little bit of a hack.
div.main {
border: 1px solid black;
padding: 14px;
}
div.icons {
margin-top: -1.65em;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
You can use CSS Flexbox. And use flex's align properties. Have a look at the snippet below:
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
align-items: center;
}
div.summary {
flex: 1;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
Hope this helps!
You still can use a custom styles when you need:
using your code:
Using Flexbox
support ie10+
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
Using Table styles
support ie8+
div.main {
border: 1px solid black;
padding: 14px;
display: table;
width: 100%;
}
div.summary {
display: table-cell;
vertical-align: middle;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="main">
<div class="summary">Some text</div>
<div class="icons">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
have a look at this flexbox guide or this guide on flexbox without flexbox.
Also consider using more explicit class names that are not dependant to tags i.e. have a look at BEM
A good way is to set both, the icon and the text, in seperate element and then give them the following css property:
.mySelectors{
display: inline-block;
vertical-align: middle;
}
If flexbox is an option, just add display: flex for main and for the icons this for horizontal positioning:
div.icons {
margin-left:auto;
}
and align-items: center for vertical alignment.
See demo below:
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
align-items: center;
}
div.icons {
margin-left:auto;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
You can simply use flexbox for doing this.
Apply display: flex to parent which is div.main in your case
and apply margin-left: auto to child which you want to align right side of window.
Something like below.
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
}
div.icons {
margin-left: auto;
/*margin-top: -1.65em;*/
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
Hope this will help you in some way (y).
Flex box reference - complete flexbox reference