I'm have a form with some tags. The from is pre-populated, but I cannot seem to be able to assign the initial height of the item using min-content. For instance:
.item {
display: flex;
align-items: center;
padding: 0 0.5rem 0 0.5rem;
font-size: 0.8rem;
}
.item > textarea {
width:100%;
margin: 1rem 0 0 1rem;
min-height: 20px;
height: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sandbox index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<div class="item"><label for="">some label</label><textarea name="" id="" cols="30" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus autem </textarea></div>
<div class="col-4"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
I don't need to resize based on input (e.g. I've seen other questions, that involve javascript in some ways). But it seems to me there really should be a way to set it directly with css if it only needs to remain static, non?
How about using a contenteditable that looks like textarea with css?
.textarea {
display: block;
width: 100%;
overflow: hidden;
resize: both;
min-height: 40px;
line-height: 20px;
border: 1px solid #ccc;
padding: 1px 6px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sandbox index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<div class="item"><label for="">some label</label><span contenteditable class="textarea" name="" id="" cols="30" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus autem </span></div>
<div class="col-4"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
You can have a static placeholder using CSS
.textarea[contenteditable]:empty::before {
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus autem";
color: gray;
}
Related
I wanted to create something like this
But my code is coming out to be completely different and I am not able to figure out why.
The image is enlarged and going out of the div. Also if I try to shift the image towards right it instead is going to the left. I think I messed up in the positioning part of the image. How can I fix this issue and why is it happening? Here is my code:
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
I went ahead and took your width off your img class and added a few styles. Next steps to achieve this look would be to contain your h1 and buttons on the left and provide a margin left.
EDIT:
I also added a col-sm-6 Bootstrap class to your col-lg-6 to make it mobile responsive. The #media only screen on your img class allows you to adjust the img to make it positioned just right on a different device.
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
transform: rotate(27deg);
position: absolute;
margin-top: 5rem;
overflow-x: hidden;
}
/* Title Responsive */
#media only screen and (max-width: 900px) {
.title-img {
transform: rotate(27deg);
position: absolute;
margin-top: 5rem;
right: 2rem;
overflow-x: hidden;
}
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6 col-sm-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<style>
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
width: 60%;
transform: rotate(25deg);
position: relative;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
margin-top: -128px;
}
.feature-box {
text-align: center;
padding: 5%;
}
</style>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
I'm trying to align the items vertically inside a full-screen jumbotron.
This is my code
.jumbotron{
background: url("https://images.unsplash.com/photo-1499028344343-cd173ffc68a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&q=100") center center / cover no-repeat;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<div class="row" style="border: 2px solid white;">
<div class="col-12 text-light" >
<h1>Rin con Fuenteo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ratione, architecto similique autem commodi, suscipit vitae inventore provident eum ea unde, officia maiores dolore a voluptatum perspiciatis iste nam. Iste.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I use the border just to help me see the row. I'm looking for a solution to make this row has the same height as the jumbotron so I can make this text vertically in the center of the page.
What you can do is set the jumbotron and container elements to be display: flex, which will make the height of container and row to be 100% of the jumbotron. Then you set the row with the property align-items: center which will vertically center the content in row:
.jumbotron {
background: url("https://images.unsplash.com/photo-1499028344343-cd173ffc68a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&q=100") center center / cover no-repeat;
min-height: 100vh;
display: flex;
}
.container {
display: flex;
}
.row {
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<div class="row" style="border: 2px solid white;">
<div class="col-12 text-light">
<h1>Rin con Fuenteo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ratione, architecto similique autem commodi, suscipit vitae inventore provident eum ea unde, officia maiores dolore a voluptatum perspiciatis iste nam. Iste.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
In the below code snippet, I tried to align the div inside .jumbotron to the center but it didn't work. Is there any extra class needed because I already tried .justify-content-center and .mx-auto.
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->
<div class="jumbotron">
<div class="justify-content-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
text-center class of bootstrap may help
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="jumbotron text-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor sitamet.
</p>
</div>
You can use the following solution:
Set d-flex to the jumbotron to use flex classes (like justify-content-center) on the jumbotron.
Set the justify-content-center to the jumbotron itself to center its content.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="jumbotron d-flex justify-content-center">
<div>
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->
<div class="jumbotron">
<div class="d-flex flex-row justify-content-center">
<h1 class="display-3">Lorem.</h1>
<p class="lead">Lorem, ipsum dolor.<span class="text-
warning">Lorem, ipsum.</span><br>Lorem ipsum dolor
sitamet.
</p>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
Please try this code,To Is there any way to align jumbotron elements in center?
<!DOCTYPE html>
<html>
<head>
<!-- Credit: http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap -->
<title>Bootstrap Centered Jumbotron</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
<style type="text/css">
html, body {
height: 100%;
}
.container{
width: 1025px;
}
.vertical-center {
height: 100%;
width: 100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
background-color: gold;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}
#media (max-width: 768px) {
.vertical-center:before {
/* height: auto; */
display: none;
}
}
</style>
</head>
<body>
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
GET STARTED
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
</body>
</html>
I hope this code will be useful for you.
Thank you.
I have layout with feature list content box, in desktop version it looks pretty fine, but in smaller versions i have problems pad / mobile and that four words with icons just breaking. I think it was not the best solution for this content box layout, what is the best and cleanest way to do this?
I need same look for desktop and for mobile.
Expecting result:
.container {
padding: 0;
}
padding: 71px 0px 0px 0px;
img {
margin-bottom: 6px;
}
h2 {
font-size: 18px;
font-weight: bold;
color: #363636;
text-align: center;
margin-bottom: 7px;
}
p {
font-size: 16px;
line-height: normal;
color: #363636;
}
a {
font-size: 14px;
color: #333333;
border-bottom: 1px solid #ef5300;
text-decoration: none;
padding-bottom: 2px;
}
.col-lg-12 {
padding: 25px 20px 20px 20px;
border-radius: 4px;
border: solid 1px #e9e9e9;
}
<!doctype html>
<html lang="en">
<head>
<!-- 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<title>My title</title>
</head>
<body>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 h-100">
<img src="icons/furniture.png" class="mx-auto d-block">
<h2>Nestandartinių baldų gamyba</h2>
<div class="row">
<div class="col-lg-7">
<span class="far fa-check-square"></span>Privačios paskirties
<span class="far fa-check-square"></span>Viešosios paskirties
</div>
<div class="col-lg-5">
<span class="far fa-check-square"></span>Korpusiniai
<span class="far fa-check-square"></span>Minkšti
</div>
</div>
<p class="text-center">Naudojamos medžiagos<span class="icon-rightcircle"></span></p>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
If you want the same "2 rows 2 columns" layout for those list feature box for all desktop and mobile, here's the simple css grid approach:
.list-feature {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="list-feature">
<span class="far fa-check-square">Privačios paskirties</span>
<span class="far fa-check-square">Korpusiniai</span>
<span class="far fa-check-square">Viešosios paskirties</span>
<span class="far fa-check-square">Minkšti</span>
</div>
Could I please have some help, I am fairly new. I'm trying to move the second section tag down the page but it keeps overlapping with the other section.
I'm trying to make it in its own container without the body background overlapping it. Any help would be appreciated.
body {
background: url(https://cdn.pixabay.com/photo/2018/03/31/23/08/water-3279564_1280.jpg);
background-size: cover;
background-position: center;
text-align: center;
}
h1 {
padding-top: 20%;
padding-bottom: 40px;
}
h6 {
padding-bottom: 20px;
}
#content {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<!-- 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/oil.css">
<title>Oil Rig</title>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Welcome to Oil Rig Company</h1>
<h6>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h6>
<button class="btn btn-warning">About Us</button>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="https://cdn.pixabay.com/photo/2012/04/13/14/34/oil-platform-32639_1280.png">
</div>
<div class="col-md-6">
<h3>Our Mission</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing anim id est laborum.</p>
</div>
</div>
</div>
</section>
</body>
</html>