My objective is to create a "grid" of buttons inside a bootstrap card element. They should be aligned to the right border of the containing card, and should be within it. I would later fill these buttons with images so that I get several image buttons.
I have written the following:
HTML:
<div class="col-sm-20 card-deck mt-3">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div id="buttonpanel" class="container buttonpanel">
<div class="row">
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
<div class="w-100"></div>
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
</div>
</div>
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
Dr Jeslin's Clinic
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: jeslinclinic</h6>
<p class="card-text">Phone: 9</p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text">Homepage</p>
<p class="card-text">External Website: https://mysite</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
</div>
CSS:
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
.buttonpanel {
position: relative;
right: 0;
height: 100%;
top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-top: 0;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
My result looks like this:
codepen
Required result:
You need to grid the page, I just moved the two big <div> inside one row and then I split them to two columns <div class="col-md-6">, you can see my code (open it in a full page):
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Office Registers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- JS files for Jquery/Jquery-ui -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
border: 1px solid white;
height: 80px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
My result
</style>
</head>
<body >
<div class="row mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="col-md-6">
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
Dr Jeslin's Clinic
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: jeslinclinic</h6>
<p class="card-text">Phone: 9</p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text">Homepage</p>
<p class="card-text">External Website: https://mysite</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="w-100"></div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="w-100"></div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am adding an example of flex layout (I believe you need to adjust some changes for better display, this is just an example):
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Office Registers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- JS files for Jquery/Jquery-ui -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
border: 1px solid white;
height: 80px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
</style>
</head>
<body >
<div class="d-flex flex-row mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="p-2 flex-fill">
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
Dr Jeslin's Clinic
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: jeslinclinic</h6>
<p class="card-text">Phone: 9</p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text">Homepage</p>
<p class="card-text">External Website: https://mysite</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
<div class="p-2 flex-fill">
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
</div>
</div>
</body>
</html>
change the grid block and adjust the css.
HTML:
<div class="row">
<div class="box col-sm-2">Buttontext</div>
<div class="box col-sm-4">Buttontext</div>
<div class="box col">Buttontext</div>
</div>
<div class="row">
<div class="box col-sm-2">Buttontext</div>
<div class="box col-sm-4">Buttontext</div>
<div class="box col">Buttontext</div>
</div>
<div class="row">
<div class="box col-sm-2">Buttontext</div>
<div class="box col-sm-4">Buttontext</div>
<div class="box col">Buttontext</div>
</div>
CSS:
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
margin: 2px;
}
.buttonpanel {
position: absolute;
right: 0;
height: 100%;
width: 45%;
top: 0px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
.row {
height: 33%;
}
Related
I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi 👋, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I want to put the <hr closer to the content in the header.
I try to use position-absolute but the disappears.
This is my first project with bootstrap.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Body -->
<header class="header row">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="col-10 row">
<h2 class="col-9 px-0 text-primary d-flex align-items-center">CHÆ¯Æ NG TRÃŒNH REBATE</h2>
<div class="col-3 px-0">
<div class="float-end d-flex justify-content-between">
<i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
</a>
<div class="dropdown-menu bg-transparent border-0">
My Profile
Settings
Log Out
</div>
</div>
</div>
</div>
</div>
</div>
<hr style="height:1px;color:#1968B2;">
</header>
<hr style="height:1px;color:#1968B2; margin-top: -4px">
you can adjust the margin top according to your usage
I suggest you do not use the <hr> tag but a new css class or ::after to do that.
<header class="header row hr-bottom">
.hr-bottom {
border-bottom: 1px solid black;
}
OR
.hr-bottom::after {
border-bottom: 1px solid black;
}
The fastest way add class to hr for example bar
<hr class="bar" style="height:1px;color:#1968B2;">
and in CSS add class:
.bar {
transform: translateY(-10px);
}
Values up to you It may take px or procentage
I'm trying to align items in a div tag and I have tried a couple ways but failed to do so.
.
Basically this is what I have:
I tried using flex but when I align individual items to top, midlde or bottom, all 3 get aligned that way.
Is there a way I can do it using bootstrap only? and if not please help me with css. Thank you!
This is my code (the styles are in a separate file but I minimized it into the html code for this question):
<div class="card card-image" style="background-image: url(/uploads/projects/<%=user_data.projects[i]['image']%>); min-height: 200px;">
<div class="text-white text-center rgba-black-strong py-3 px-4 rounded" style=" min-height: 200px;">
<div class="--I tried flex and different aligns--">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
<%=user_data.projects[i].category%>
</p>
<h6 class="font-weight-bold">
<%=user_data.projects[i].title%>
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal<%=i%>"><i class="fa fa-clone left"></i> View</a>
</div>
</div>
</div>
You can use the classes d-flex, flex-column and justify-content-around to solve this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<div class="card card-image">
<div class="d-flex justify-content-center rgba-black-strong py-3 px-4 rounded" style="min-height: 200px;">
<div class="d-flex flex-column justify-content-around">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
1st item
</p>
<h6 class="font-weight-bold">
2nd item
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal">
<i class="fa fa-clone left"></i> View
</a>
</div>
</div>
</div>
I use this login form from a Fluent Kit framework, third on the right in the example, the dark one.
It misses one detail I don't know how to change: the checkbox input (you can find it's docs here, nothing unexpected, really), when checked, is not in frameworks info color like the rest of the sign-up form, it is primary. Any idea how I change it, or how would I generate styles for different checkboxes, so I can use not only the primary one, but others too?
Here I tried to recreate the styles using the template links from the codepen:
input[id^="login2"]::-webkit-input-placeholder { color: #444444; }
:-moz-placeholder {
color: #444444;
opacity: 1;
}
input[id^="login2"]::-moz-placeholder {
color: #444444;
opacity: 1;
}
input[id^="login2"]:-ms-input-placeholder { color: #444444; }
input[id^="login2"]::-ms-input-placeholder { color: #444444; }
input[id^="login2"]::placeholder { color: #444444; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/css/fluent-kit.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/js/fluent-kit.min.js"></script>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-8 py-2">
<div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
<h5 class="py-3 text-center bold bg-darkdimgrey">
Sign <span class="text-info">in</span>
</h5>
<div class="px-3"><hr class="my-0"></div>
<div class="px-3 pt-3">
<fieldset>
<label for="login2-email">Email</label>
<input id="login2-email" type="email" name="email" placeholder="me#example.com">
</fieldset>
<fieldset>
<label for="login2-password">Password</label>
<input id="login2-password" type="password" name="password" placeholder="******************" class="input-with-button"/>
<button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
</fieldset>
<div class="d-flex my-2">
<fieldset>
<input type="checkbox" id="login2-remember-me" />
<label for="login2-remember-me">Remember me</label>
</fieldset>
<small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
</div>
<div class="d-flex pb-3 mt-2">
<small class="d-inline-block py-1">
Not a member? <a class="text-info bold" href="#">Register</a>
</small>
<button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
Sign in
<i class="mi mi-ChevronRight"></i>
</button>
</div>
<div class="pb-3 text-center">
<small class="d-block mb-3">or sign in with</small>
<div class="pb-3 d-flex justify-content-around">
<a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
<a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
<a class="text-white" href="#"><i class="mi mi-google"></i></a>
<a class="text-white" href="#"><i class="mi mi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Add this style
input[type=checkbox]#login2-remember-me:checked+label:after {
background-color: #00B7C3;
}
input[type=checkbox]#login2-remember-me:checked+label:after {
background-color: #00B7C3;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/css/fluent-kit.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/js/fluent-kit.min.js"></script>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-8 py-2">
<div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
<h5 class="py-3 text-center bold bg-darkdimgrey">
Sign <span class="text-info">in</span>
</h5>
<div class="px-3">
<hr class="my-0">
</div>
<div class="px-3 pt-3">
<fieldset>
<label for="login2-email">Email</label>
<input id="login2-email" type="email" name="email" placeholder="me#example.com">
</fieldset>
<fieldset>
<label for="login2-password">Password</label>
<input id="login2-password" type="password" name="password" placeholder="******************" class="input-with-button" />
<button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
</fieldset>
<div class="d-flex my-2">
<fieldset>
<input type="checkbox" id="login2-remember-me" />
<label for="login2-remember-me">Remember me</label>
</fieldset>
<small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
</div>
<div class="d-flex pb-3 mt-2">
<small class="d-inline-block py-1">
Not a member? <a class="text-info bold" href="#">Register</a>
</small>
<button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
Sign in
<i class="mi mi-ChevronRight"></i>
</button>
</div>
<div class="pb-3 text-center">
<small class="d-block mb-3">or sign in with</small>
<div class="pb-3 d-flex justify-content-around">
<a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
<a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
<a class="text-white" href="#"><i class="mi mi-google"></i></a>
<a class="text-white" href="#"><i class="mi mi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?
Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.
Here's the live code: Codepen - Bootstrap rows overlapping
Here's my current HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" />
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
Any guidence would be helpful!
Change height from vh to %
.v-align{
height:30%;
}
#import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
background-color: ;
padding-top: 70px;
}
#full-h {
height: 100%;
width: 100%;
}
.txt-wrap {
word-wrap: break-word;
}
.v-align {
height: 30%;
}
.v-align2 {
height: 40%;
}
.fl-row {
background-color: #314d74;
}
.f-row {
margin-top: 6vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.s-row {
background-color: #b3bdc7;
}
.s-row-box {
padding: 5vh;
text-align: center;
}
.t-row {
background-color: #697fa4;
}
h1 {
color: #FFE082;
text-align: center;
margin-top: 2vh;
}
h2 {
border-left: 4px solid #FFB300;
}
.sol-icons {
font-size: 72px;
}
.sol-icons-cap {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.form-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact.s-row-box {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 576px) {
/* ... */
}
#media (min-width: 768px) {
/* ... */
}
/****** Canvas Animation ******/
/***** Animation CSS Code *****/
.project-title--container,
.project-link--container {
width: 100%;
text-align: center;
}
.project-title,
.project-link {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.project-title {
font-size: 18px;
margin-top: 10px;
}
.project-link,
.project-link a {
color: #fff;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.fa {
font-size: 22px !important;
padding: 0 5px;
color: #fff;
}
.container-animation--flexbox {
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;
}
.animationItem {
position: absolute;
margin-right: 35px;
}
#animationItem-image--bigCloud {
animation: bobble 2s infinite;
margin-top: 3vh;
margin-left: 12vh;
font-size: 170px;
color: #7ec0ee;
}
#animationItem-image--smallCloud {
animation: bobble 4s infinite;
margin-top: 12vh;
margin-left: 20vh;
font-size: 145px;
color: #e9e9e9;
}
.smallCloud-two {
margin-bottom: 5px;
margin-right: 320px;
font-size: 145px;
z-index: -1;
color: #d9d9d9 !important;
animation: bobble 2.5s infinite !important;
}
#keyframes bobble {
0% {
transform: translate3d(0px, -25px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, -35px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, -25px, 0px);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Network Technology</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
</html>