How to structure a sidenav in HTML/Bootstrap 3? - html

I'm trying to understand how to structure divs/containers using the bootstrap grid system in order to get a proper responsive sidenav. I want my site to have a fixed sidenav and maybe eventually make it a pop-out sidenav when I get around to learning jquery. This is my HTML currently & the issue I am having currrently is I need to figure out a way to make it fixed, responsive and turn into a horizontal "hamburger" menu on ipad and mobile devices.
<div class="container-fluid">
<div class="navbar fixed-top">
<div class="row">
<div class="col-md-3 sidebar">
Sidebar Content
</div>
</div>
</div>
<div class="col-md-9 content">
Main Content
</div>
</div>
first thing I did was put everything in a container then I enclosed the nav into the navbar class which I don't know if that's the proper way to do it.
Also here is some CSS if you want to replicate what I have so far.
html, body, .container-fluid, .row {
height: 100%;
}
.sidebar {
background-color: #CCCCCC;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #CCCCCC;
}
}
#media (min-width: 992px){
.content{
margin-left: 25%;
}
}

.row {
padding-top: 4rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-3 sidebar">
<h3>Sidebar</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="col-9 content">
<h3>Content</h3>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
</div>

Related

Maintain same height in elements inside columns located side by side with CSS

I have a template like this:
I want to maintain the same height between each item of both columns, depending on the one that has the biggest height, but only when they are side by side. In smaller screens, when they have width: 100%, each div has its own height depending of its own content height.
It should look like this:
I think that what I want is something like display: table, but I need both columns to be responsive.
All the questions I´have found are about maintaining the same height in both columns, but I´m already using flexbox to achieve this.
Is it possible to achieve what I vant with css only?
EDIT: Added code snippet. I forgot to mention that it needs to be supported by Chrome 36 (Android L WebView).
This question´s first answer shows what I wanted to achieve, but display:subgrid is not supported by any version Chrome at present:
Align child elements of different blocks
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}
<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
</div>
<div class="padding footer">
Footer
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>
you may take a look at #supports to filter possible display:option or subgrid .
example with display:contents
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}
#supports (display: contents) {
.row.responsive-sm {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.col-50 {
display: contents
}
.title {
grid-row: 1
}
.content {
grid-row: 2;
}
#media screen and (max-width:500px) {
/* set the break point to the right value */
.row.responsive-sm,
.col-50 {
display: block;
}
}
}
<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
</div>
<div class="padding footer">
Footer a
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>
usefull for a fast check on supports on properties: https://caniuse.com/

Bootstrap navbar sticky

I want to place a navbar (Bootstrap 4) in a div that contains a background image. When the user scrolls down, the navbar should stick on top, resize and change it's color.
If I place it in the div it stays sticky until the bg-img scrolls out of view. It works when the navbar is above this div.
Here is the code to play: https://www.codeply.com/go/WbswGGulCf
Thanks!
Edit:
Here is the code:
HTML:
<div class="top flex-center position-ref">
<div class="top-right links">
Kontakt
Login
</div>
</div>
<div class="container-fluid">
<span class="position-absolute trigger"></span>
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<div class="bgimg">
<div class="flex-center content full-height">
<div class="title">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Leo a diam sollicitudin tempor id eu. Tellus at urna condimentum mattis. Nunc mattis enim ut tellus. Feugiat vivamus at augue eget arcu dictum. Mi proin sed libero enim sed faucibus turpis in. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Mauris rhoncus aenean vel elit. Mi bibendum neque egestas congue quisque egestas diam. Convallis posuere morbi leo urna. Aliquam sem fringilla ut morbi tincidunt. Mattis molestie a iaculis at. Felis donec et odio pellentesque diam volutpat commodo sed.
A arcu cursus vitae congue mauris rhoncus aenean vel elit. Velit egestas dui id ornare arcu odio. Tincidunt nunc pulvinar sapien et. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mauris rhoncus aenean vel elit scelerisque mauris. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque convallis a cras semper auctor neque. Quam id leo in vitae turpis massa sed elementum tempus. Sit amet purus gravida quis blandit turpis. Quisque id diam vel quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque. Turpis in eu mi bibendum neque egestas congue quisque egestas. Ipsum consequat nisl vel pretium lectus quam id leo in. Massa placerat duis ultricies lacus sed turpis.</p>
</div>
</div>
</div>
Javascript:
(new IntersectionObserver(function(e,o){
if (e[0].intersectionRatio > 0){
document.documentElement.removeAttribute('class');
} else {
document.documentElement.setAttribute('class','stuck');
}
})).observe(document.querySelector('.trigger'));
CSS:
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top {
background-color: #fff;
height: 60px;
}
.sticky-top {
transition: all 0.25s ease-in;
}
.stuck .sticky-top {
background-color: #326f8d !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
margin-left: -1vw;
margin-right: -1vw;
}
.bgimg {
text-align: center;
background-image: url(https://placeimg.com/1000/480/animals);
background-attachment: fixed;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-size: cover;
margin-left: -1vw;
margin-right: -1vw;
/* height: calc(100% - 60px); */
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.links > a {
color: #433b3b;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.content {
height: 280px;
color: #fff;
}
When you apply position: sticky to the element it only remains fix until it reach to the end of the content of its parent element. Hence your nav goes upward when the end of image reach. And in your case position: sticky is applied on class sticky-top. Use position:fixed to stop that while placing the nav inside the div which conatins background image.

Positioning an image in a 100vh box

I've been looking around for some time but couldn't find a solution.
So I'm working on a Personal portfolio with different sections (height: 100vh;). The problem I have is that I'm unable to position the images within the section itself (I want the image of the pinguïns to be positioned like the first lion image. But in the section below.). Can someone help me with this? (I'm using a bootstrap grid)
Code:
.section-1 {
background: radial-gradient(#2d2d2d, #1a1a1a);
height: 100vh;
}
.section-2 {
background: #fc6621;
height: 100vh;
}
.section-3 {
background: #20468b;
height: 100vh;
}
.col-sm-6 {
height: 100vh;
}
#profile img {
display: inline;
float: right;
position: absolute;
bottom: 0;
right: 0;
z-index: 0;
}
.center {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
height: 100vh;
position: relative;
z-index: 10;
}
<!-- 1st section -->
<div class="section-1">
<div id="profile"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="1006" height="821"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button">CONTACT ME</div>
</div>
</div>
</div>
</div>
<!-- 2nd section -->
<div class="section-2">
<div id="smartschool"><img src="https://i.gyazo.com/abdeb771b58043c53cfb08e5ffd42f6e.jpg" width="990" height="753"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button">READ MORE</div>
</div>
</div>
</div>
</div>
<!-- 3th section -->
<div class="section-3">
<div id="dutchcreativestudio"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="933" height="643"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button">READ MORE</div>
</div>
</div>
</div>
</div>
The first one does the right thing!
But then it gets a mess (or they stack above each other)
position: absolute; is relative to the nearest parent. if no parents have a set position, it will be relative to the body which is what seems to be happening here.
so each 100vh section will need to have position: relative;
its also worth noting that float won't do anything on an element with absolute positioning, since position: absolute; takes the element out of the document flow.

Create multiple full screen divs

I'm trying to create a single page website, with multiple divs that are full screen, but I'm not being able to turn them full screen.
I'm Already using bootstrap to make the website responsive, and it's my first time doing that.
What I want to do is set a background video, then when I scroll down, the divs fitting the entire viewport
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="imagens/logo_icone.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Museu do Barro Preto</title>
</head>
<body>
<div class="container-fluid">
<!--Video -->
<div class="row">
<div class="col-xs-12">
<video class="video_bg" autoplay muted loop>
<source src="video/prom.mp4" type="video/mp4">
A extensão do ficheiro não é suportada pelo seu browser
</video>
</div>
</div>
<!--/Video -->
<!--Barra de Navegação-->
<div class="row">
<header class="col-md-12">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Quem Somos</li>
<li>Onde Estamos</li>
<li>Educação</li>
<li>Video</li>
<li>Exposições</li>
</ul>
</div>
</div>
</nav>
</header>
</div>
<!--/Barra de Navegação-->
<div class="row pag1">
<article class="col-md-8">
<section>
<h1>Quem Somos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
<aside class="col-md-4">
<img src="http://www.dueceira.pt/trilhos/imgs/barro_preto_vnp2.jpg" alt="Peças Barro Preto">
</aside>
</div>
<div class="row">
<article>
<aside class="col-md-4">
<div id="mapa">
</div>
</aside>
<section class="col-md-8">
<h1>Onde Estamos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
</div>
<div class="row">
<div id="ilustracao">
<h1>SLIDESHOW DAS ILUSTRAÇÕES</h1>
</div>
</div>
<div id="video">
<div id="documentario">
<h1>Documentario</h1>
<video class="documentario" controls>
<source src="video/prom.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
html,body {
height:100%;
margin:0;
}
html>body .pag1 {
height:auto;
}
.video_bg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
.borders {
border: 1px solid black;
}
.documentario {
width: 500px;
height: 500px;
}
.pag1 {
width: 100%;
height: 100%;
margin-top: 100%;
background-color: #fff;
overflow: hidden;
position: relative;
}
.pag1 img {
width: 400px;
height: 400px;
}
Try giving your div's a vh style. Such as
div {max-height:100vh;} // this will give your div a max height of 100 vertical height which is set to full screen size.
http://www.w3schools.com/cssref/css_units.asp
What you want is the vh unit, coupled with a fallback for browsers that don't support it. Unless it's a very big project (those scroll-y sites usually aren't) I'd ditch Bootstrap. It's pretty badly made, actually.
Last site we did that had to behave like that, we put each full-screen element in a li, sized the li using 100vh, falling back to regular px units set by javascript to match screen size, falling back to a set of common screen resolutions through conditional comments.
Sadly, using 100% created a lot of headaches with sizing child elements.
This is elaborate to set up, but if you do this once it will save you a lot of work later. It's also pretty much the only solid way to do this accessibly. (We test all our work through a group of users with assistive technology.)
So In essence:
<ol>
<li>
'Page' content here.
</li>
<li>
'Page'content here.
</li>
</ol>
ol {
display: block;
position: relative;
width: 100%; /* Caused no issues and is better supported */
height: auto;
float: left;
}
li {
display: block;
position: relative;
width: 100%;
height: 100vh;
float: left;
}
Look at Modernizr if you haven't already:
https://modernizr.com/
Also look at the various Javascript solutions for serving up compatible video formats, or you may find yourself showing a full-screen blank screen.
Oh, and insert obligatory warning here about video aspect ratio's not matching all screen aspect ratio's. ;-)

I need the three div in the section to be centered

I need the three div in the section to be centered in the middle of the section; they are off too the left too far right now.
<section class="support-feat clearfix">
<div class="container-fluid">
<div class="row box">
<div class="block about-feature-1 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".3s">
<h2>
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque
</p>
</div>
<div class="block about-feature-2 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
<h2 class="item_title">
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel,
donec massa turpis rutrum mauris, quam enim in dui sit
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque
</p>
</div>
<div class="block about-feature-3 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".7s">
<h2 class="item_title">
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque
</p>
</div>
</div>
</div>
</section>
.support-feat {
text-align: center;
margin: 2%
}
.support-feat .block {
color: #1c1c1c;
flex: 2;
min-width: 340px;
max-width: 400px;
box-sizing: border-box;
}
.support-feat .block p {
font-weight: 300;
font-size: 140%
}
.support-feat h2 {
font-size: 200%
}
.support-feat .about-feature-1 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}
.support-feat .about-feature-2 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}
.support-feat .about-feature-3 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}
Here's an image to explain what's going on and what I'm trying to do;
basically I'm trying to do what this does: https://www.tvlift.com/support/technical-support/
You can utilize bootstraps 12-column grid system to accomplish this... check out my jsfiddle below https://jsfiddle.net/gumctejp/
Basically you will format your page component to fit within the context of bootstraps grid system.
A really simple example would look like:
<div class="row text-center">
<div class="col-sm-3">
</div>
<div class="col-sm-2 box">
one box
</div>
<div class="col-sm-2 box">
two box
</div>
<div class="col-sm-2 box">
three box
</div>
<div class="col-sm-3">
</div>
</div>
See http://getbootstrap.com/css/ for the official documentation on boostraps grid system
As far as I understood, you wish to have centered floating items. This can be realized with some basic css:
HTML:
<div class="row">
<div class="col-xs-12 text-center">
<div class="floating-center">
Whatever content in here
</div>
</div>
</div>
Be sure to have all required elements in place when working with the bootstrap grid system (in your code, the column element was missing, leading to glitches sometimes).
CSS for the floating elements:
.text-center {
text-align: center;
}
.floating-center {
position: relative;
width: 500px;
height: auto;
margin: 5px; /*Whatever margin each element should have*/
display: inline-block; /*This is mainly doing the magic */
}
EDIT:
Added a plunker to show the effect: https://plnkr.co/edit/vGKHW8Pa1tw2RLlmj4BI?p=preview
Note: This is how to center the divs. Device dependant widths can be realized with css #media attribute.