make space between bootstrap column align one below other in small device [duplicate]Add spacing between vertically stacked columns in Bootstrap 4Meaning of numbers in “col-md-4”,“ col-xs-1”, “col-lg-2” in BootstrapExpand a div to take the remaining widthFont scaling based on width of containerCenter a column using Twitter Bootstrap 3How do I add spacing between columns in Bootstrap?Remove padding from columns in Bootstrap 3How can I make Bootstrap columns all the same height?Aligning inputs in Bootstrap columns in different rowsSpace between items in bootstrapAdding space between columns in Bootstrap 4Add small spaces around Bootstrap Grids (between the columns and rows)
How can Trident be so inexpensive? Will it orbit Triton or just do a (slow) flyby?
Is it better practice to read straight from sheet music rather than memorize it?
A social experiment. What is the worst that can happen?
The IT department bottlenecks progress. How should I handle this?
I am looking for the correct translation of love for the phrase "in this sign love"
Can someone explain how this makes sense electrically?
What is the evidence for the "tyranny of the majority problem" in a direct democracy context?
Does the expansion of the universe explain why the universe doesn't collapse?
How much character growth crosses the line into breaking the character
Is it possible to have a strip of cold climate in the middle of a planet?
Argument list too long when zipping large list of certain files in a folder
Melting point of aspirin, contradicting sources
Can I sign legal documents with a smiley face?
Yosemite Fire Rings - What to Expect?
Is this toilet slogan correct usage of the English language?
Travelling outside the UK without a passport
Freedom of speech and where it applies
How should I respond when I lied about my education and the company finds out through background check?
The screen of my macbook suddenly broken down how can I do to recover
Open a doc from terminal, but not by its name
Finding NDSolve method details
Request info on 12/48v PSU
Does a 'pending' US visa application constitute a denial?
If a character has darkvision, can they see through an area of nonmagical darkness filled with lightly obscuring gas?
make space between bootstrap column align one below other in small device [duplicate]
Add spacing between vertically stacked columns in Bootstrap 4Meaning of numbers in “col-md-4”,“ col-xs-1”, “col-lg-2” in BootstrapExpand a div to take the remaining widthFont scaling based on width of containerCenter a column using Twitter Bootstrap 3How do I add spacing between columns in Bootstrap?Remove padding from columns in Bootstrap 3How can I make Bootstrap columns all the same height?Aligning inputs in Bootstrap columns in different rowsSpace between items in bootstrapAdding space between columns in Bootstrap 4Add small spaces around Bootstrap Grids (between the columns and rows)
1
This question already has an answer here:
Add spacing between vertically stacked columns in Bootstrap 4
4 answers
- In this example there are two column
col-sm-3,col-sm-8in 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.link to bootstrap code
html css bootstrap-4
asked Mar 7 at 7:55
yashyash
697
marked as duplicate by il_raffa, Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 7 at 12:03
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
1
This question already has an answer here:
Add spacing between vertically stacked columns in Bootstrap 4
4 answers
- In this example there are two column
col-sm-3,col-sm-8in 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.link to bootstrap code
html css bootstrap-4
asked Mar 7 at 7:55
yashyash
697
marked as duplicate by il_raffa, Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 7 at 12:03
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
1
1
1
This question already has an answer here:
Add spacing between vertically stacked columns in Bootstrap 4
4 answers
- In this example there are two column
col-sm-3,col-sm-8in 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.link to bootstrap code
html css bootstrap-4
asked Mar 7 at 7:55
yashyash
697
This question already has an answer here:
Add spacing between vertically stacked columns in Bootstrap 4
4 answers
- In this example there are two column
col-sm-3,col-sm-8in 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.link to bootstrap code
This question already has an answer here:
Add spacing between vertically stacked columns in Bootstrap 4
4 answers
html css bootstrap-4
html css bootstrap-4
asked Mar 7 at 7:55
yashyash
697
asked Mar 7 at 7:55
yashyash
697
edited Mar 7 at 8:07
yash
asked Mar 7 at 7:55
yashyash
697
asked Mar 7 at 7:55
yashyash
697
asked Mar 7 at 7:55
yashyash
697
697
marked as duplicate by il_raffa, Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 7 at 12:03
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by il_raffa, Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 7 at 12:03
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
2
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>answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
add a comment |
2
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
Codepen example
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
add a comment |
1
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.
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
Thanks @P. Jerome
– yash
Mar 7 at 8:38
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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>answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
add a comment |
2
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>answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
add a comment |
2
2
2
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>answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
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>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>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>answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
answered Mar 7 at 8:13
Mohit GuptaMohit Gupta
6281313
6281313
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
add a comment |
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
thanks @Mohit Gupta
– yash
Mar 7 at 8:40
add a comment |
2
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
Codepen example
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
add a comment |
2
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
Codepen example
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
add a comment |
2
2
2
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
Codepen example
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
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
Codepen example
@media screen and (max-width: 576px)
.col-sm-8
margin-top: 30px;
@media screen and (max-width: 576px)
.col-sm-8
margin-top: 30px;
@media screen and (max-width: 576px)
.col-sm-8
padding-left: 0;
padding-right: 0;
@media screen and (max-width: 576px)
.col-sm-8
padding-left: 0;
padding-right: 0;
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
edited Mar 7 at 8:16
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
answered Mar 7 at 8:08
Marc HjorthMarc Hjorth
9331716
9331716
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
add a comment |
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
Thanks @Marc Hjorth
– yash
Mar 7 at 8:27
add a comment |
1
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.
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
Thanks @P. Jerome
– yash
Mar 7 at 8:38
add a comment |
1
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.
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
Thanks @P. Jerome
– yash
Mar 7 at 8:38
add a comment |
1
1
1
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.
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
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.
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
answered Mar 7 at 8:13
P. JeromeP. Jerome
2517
2517
Thanks @P. Jerome
– yash
Mar 7 at 8:38
add a comment |
Thanks @P. Jerome
– yash
Mar 7 at 8:38
Thanks @P. Jerome
– yash
Mar 7 at 8:38
Thanks @P. Jerome
– yash
Mar 7 at 8:38
add a comment |
