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>
Related
I created a basic website to improve my front-end skills. I used Bootstrap 5 to make it responsive but it does not look good on the phone. Can somebody tell me what I did wrong? On my mobile device, it looks like this :
enter image description here
When I decreased the size of the browser, it looked good, but when I put it online on github, it looks like the page has been cut.
Html :
<!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>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row">
 <input class="form-control" id="email" placeholder="Your email adress..."> 
<button type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>  
<i class="fab fa-twitter"></i>  
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
css:
#email{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover{
background-color: rgb(124, 111, 204);
}
.firstp{
padding-right: 55px;
}
.imgdash{
width: 100%;
max-width: 400px;
height: auto;
}
Add flex-wrap and justify-content-center class on form element, will resolve your issue. Also add mb-2 class on both input and button element.
Below code snippet also updated and i hope it'll resolve your issue. Thank You
#email {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover {
background-color: rgb(124, 111, 204);
}
.firstp {
padding-right: 55px;
}
.imgdash {
width: 100%;
max-width: 400px;
height: auto;
}
<!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>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row flex-wrap justify-content-center">
 <input class="form-control mb-2" id="email" placeholder="Your email adress..."> 
<button class="mb-2" type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>  
<i class="fab fa-twitter"></i>  
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
What I can see is you are using a lot of .col . You need to specify .col for small and large devices. Otherwise some of it's function will break. Take a look at this link:
https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks
You see in this link that there are many sm modifier used. Use them and you can see some results.
I want the blue element to expand to the bottom of the page.
But if I set the height: 100% to it, then it does expands beyond the bottom of the page. I think it does that because it doesn't take in consideration the size of the red element and then together with the size of the red element they go more that 100% of the parent.
How do I know that it expand beyond the page? Because the parent element have borders that then are shorter than the blue element.
The code looks like that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
:root {
--body-backroung-color: #e7e8e5
}
html, body {
height: 100vh;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: var(--body-backroung-color);
}
.main-content {
padding: 25px;
}
.zero-margin-lr {
margin-left: 0;
margin-right: 0;
}
.page-margin-lr {
margin-left: 9em;
margin-right: 9em;
border-left: solid 0.1em gray;
border-right: solid 0.1em gray;
}
.main-content-custom {
background-color: #e9ecef;
}
.jumbotron-custom {
margin-bottom: 0 !important;
}
.content {
margin-bottom: 1em
}
</style>
</head>
<body class="mat-typography">
<div class="container-flex page-margin-lr">
<!--RED ELEMENT-->
<div class="row">
<div class="col-12">
<div class="jumbotron text-center">
<h1>.</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/home']"
routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- BLUE ELEMENT-->
<div class="row main-content-custom zero-margin-lr">
<div class="col-2"></div>
<div class="col-8">
<div class="main-content">
<form name="newPost" #newPost="ngForm">
<div class="form-group">
<label for="title">Title</label>
<input id="title" name="title" type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea id="content" name="content" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<label for="author">Author</label>
<input id="author" name="author" type="text" class="form-control"/>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary" >Post</button>
</div>
</form>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</body>
</html>
The snippet above is inside the body element. The html and body have height: 100%
How can I make the blue element expand to the bottom of the page but don't go beyond/outside of the parent element?
So the solution for me was:
add height: auto; min-height: 100vh to the parent.
add flex: 1 to the child/blue element
Thank you to Zohir Salak for heling a lot.
I'm having a hard time trying to figure out how I'm able to make this Slick Accordion fully mobile responsive and it seems as if everything is overlapping on everything that I have tried.
Here is the Accordion on Desktop (Works perfectly):
Here is the Accordion on Mobile Responsiveness on (991px and less):
So I can't seem to figure out how to make all the things appear inline like the mobile version, I have tried Display/Position/etc.. attributes and have failed miserably.
Here is the code:
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small {
height: 70px!important;
}
.small:hover {
background-color: #F8E498!important;
}
.col-md-1 {
padding: 0px!important;
margin-top: 5px!important;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
}
#AccordIcon {
padding-right: 10px;
height:25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/uii8cJt.png" />
</div>
<div class="col-md-11">
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and
applications to empower teamwork and quickly find information
within your organization.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/fV0AGNi.png" />
</div>
<div class="col-md-11">
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace
offered in Office 365. Teams makes collaborating with your team
easy.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have shortened the code down for you so that only one accordion row is visible just so there isn't so much code, and I have also included the proper jQuery libraries and the Bootstrap CDN libraries.
Try the below given structure of html. Basically add d-flex align-items-center on the anchors and keep the heading and p elements in a div. And add height and widths to your images.
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Got it all figured out, since I had predefined CSS using Sharepoint Master Pages and Bootstrap it was not aligning well, but this solved the issue.
#media (max-width: 992px)
{
#slick-slide02 {
display: visible!important;
}
.col-md-1 {
float: left!important;
margin-right: 10px!important;
}
.col-md-1 img {
height: auto!important;
width: 45px!important;
}
#AccordionText {
display: flex!important;
}
.small {
height: auto!important;
}
}
.small {
height: 70px;
}
Simple css changes has fixed the trick.
This question already has answers here:
How can I center an image in Bootstrap?
(4 answers)
Closed 4 years ago.
I'm working on a random quote web app and I can't center the image horizontally. Usually, this is acquired using mx-auto. My image is inside a div with size col-12, and the div is inside a row. However, image still not centering. If anyone can point out what am I missing? thanks
link http://pctechtips.org/apps/quotes/
code
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
css
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
Add classes d-flex align-items-center to the col-12 div containing the image
Add d-block class to img that make your image center.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid mx-auto image d-block">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
or add text-center to it parent.
body {
background-color: #354048;
}
/*.test {
border-style: solid;
}*/
.container {
padding-top: 50px;
}
.header_text {
/*font-family: 'Allura';*/
font-family: 'Cinzel', serif;
font-size: 60px;
font-weight: bold;
}
.text-primary {
color: #29c0ec!important;
}
.sub_text {
font-family: 'Cinzel', serif;
font-size: 25px;
font-weight: bold;
}
#getMessage {
font-size: 18px;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: #29c0ec;
border-width: 3px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 20px;
}
i {
color: white;
}
.btn {
font-size: 35px;
border-radius: 70px;
}
<html><head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Daily Quotes</h1>
<row>
<div class="col-12 text-center">
<img src="http://pctechtips.org/apps/quotes/aristoteles.jpg" class="img-fluid image">
</div>
</row>
<div class="row">
<p class="col-12 sub_text text-center text-primary">Drops of wisdom!</p>
</div>
<div class="col-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-8 mx-auto">
<div id="content" class="row col-12 text"></div>
<div id="author" class="row col-12 text"></div>
</div>
<!-- buttons -->
<div class="container">
<div class="row">
<div class="col-4 text-right">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="col-4 text-center">
<a class="btn btn-info btn-social btn-twitter mx-auto" href="https://twitter.com/intent/tweet?text=With the realization of ones own potential and self-confidence in ones ability, one can build a better world. Dalai Lama" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-4 text-left">
<a class="btn btn-info btn-social">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body></html>
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX