col-sm-3, col-sm-8 in one row.After minimize the window (refer screenshot) the two column are sticking to each other. -Also second column ie col-sm-8 is not taking full width at sm breakpoint.
note: want to main space between columns at sm breakpoint, also want full size of col-sm-8.
You could add some margin on a breakpoint like this:
@media screen and (max-width: 576px) {
.col-sm-8 {
margin-top: 30px;
}
}The sm keyword means small in bootstrap, which breaks at 576px.
This post explains it pretty well
Full width
In order to make the last div in full width, you can see why it isn't full width at the start by inspecting it.
As you can see it has padding in each side - padding: 15px. We can remove it in a breakpoint, to keep the space in higher resolutions.
@media screen and (max-width: 576px) {
.col-sm-8 {
padding-left: 0;
padding-right: 0;
}
}Here is your code, with the new code
You need to just add class then col-sm-8 will be full width and also space between columns at sm breakpoint
Add this below calss on col-sm-8 div only:
<div class="col-sm-8 mt-3 mt-md-0 p-0 px-md-3">
document.getElementsByTagName("h1")[0].style.fontSize = "80px";<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<style>
.nav-pills .nav-link.active{
color: rgb(12, 11, 11) !important;
background-color: rgb(233, 233, 233);
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #1d1c1c;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-sm-3 text-white bg-secondary pt-2 pb-2" >
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link text-light active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Profile</a>
<a class="nav-link text-light " id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link text-light " id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-sm-8 mt-3 mt-md-0 p-0 px-md-3">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active " id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="card">
<div class="card-header card-title"><b>Profile</b></div>
<div class="card-body">Panel Content</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<div class="card">
<div class="card-header card-title"><b>Messages</b></div>
<div class="card-body">Panel Content</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<div class="card">
<div class="card-header card-title"><b>Settings</b></div>
<div class="card-body">Panel Content</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<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>
</body>
</html>
First, you can use all Bootstrap margin properties. In that case, I think mb-3 (margin-bottom-3) or mt-3 (margin-top-3) should be what you are looking for.
Note that with pure CSS you can also add a margin if the width is superior to X px.
For example :
@media screen and (max-width: 640px) {
.do_margin_bottom {
margin-bottom:20px; /* Equivalent of mX-3 */
}
}
Then apply .do_margin_bottom to your col-sm-3.
For the second point : Your col-sm-8 is correctly indented, as your col-sm-3. This is your div.card that is adding margin-left:15px & margin-right:15px. You should set thoses values on your card element to get what you want.
I personnally recommand you not doing this. A card without margins is weird.
