Bootstrap container conflict with css footer menuSet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?Floating elements within a div, floats outside of div. Why?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?How to make Twitter Bootstrap menu dropdown on hover rather than clickIs it possible to apply CSS to half of a character?
Writing rule stating superpower from different root cause is bad writing
Test if tikzmark exists on same page
Approximately how much travel time was saved by the opening of the Suez Canal in 1869?
A newer friend of my brother's gave him a load of baseball cards that are supposedly extremely valuable. Is this a scam?
How to test if a transaction is standard without spending real money?
Can a Warlock become Neutral Good?
What is the offset in a seaplane's hull?
What's the output of a record cartridge playing an out-of-speed record
How does strength of boric acid solution increase in presence of salicylic acid?
What would happen to a modern skyscraper if it rains micro blackholes?
What does it mean to describe someone as a butt steak?
Why does Kotter return in Welcome Back Kotter?
LaTeX closing $ signs makes cursor jump
Can divisibility rules for digits be generalized to sum of digits
Arthur Somervell: 1000 Exercises - Meaning of this notation
Why Is Death Allowed In the Matrix?
Why did the Germans forbid the possession of pet pigeons in Rostov-on-Don in 1941?
What does CI-V stand for?
Has the BBC provided arguments for saying Brexit being cancelled is unlikely?
Why are 150k or 200k jobs considered good when there are 300k+ births a month?
Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)
Can an x86 CPU running in real mode be considered to be basically an 8086 CPU?
In Japanese, what’s the difference between “Tonari ni” (となりに) and “Tsugi” (つぎ)? When would you use one over the other?
Languages that we cannot (dis)prove to be Context-Free
Bootstrap container conflict with css footer menu
Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?Floating elements within a div, floats outside of div. Why?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?How to make Twitter Bootstrap menu dropdown on hover rather than clickIs it possible to apply CSS to half of a character?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
5
I'm trying to make a website that has footer menu. And i'm using container in my content since i don't know how to make it center. When I tried to apply the footer menu without using container. The background-color of the footer expand upward where the last div without container. And the text won't center.
Sample
It become like this when I use .mainbar:float:left; and .sidebar:float:right;
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar
float: left;
width: 736px;
.sidebar
float: right;
width: 214px;
#fnav
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
#fnav ul
display: flex;
list-style: none;
margin: auto;
width: 1000px;
#fnav ul li.fmenu-item
flex-grow: 1;
padding: 10px 0 10px 0;
#fnav ul li.fmenu-item a
color: #262d33;
text-decoration: none;
.copyright
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
html css bootstrap-4
edited Mar 8 at 5:03
RN92
1,024725
asked Mar 8 at 4:31
VenVen
669
add a comment |
5
I'm trying to make a website that has footer menu. And i'm using container in my content since i don't know how to make it center. When I tried to apply the footer menu without using container. The background-color of the footer expand upward where the last div without container. And the text won't center.
Sample
It become like this when I use .mainbar:float:left; and .sidebar:float:right;
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar
float: left;
width: 736px;
.sidebar
float: right;
width: 214px;
#fnav
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
#fnav ul
display: flex;
list-style: none;
margin: auto;
width: 1000px;
#fnav ul li.fmenu-item
flex-grow: 1;
padding: 10px 0 10px 0;
#fnav ul li.fmenu-item a
color: #262d33;
text-decoration: none;
.copyright
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
html css bootstrap-4
edited Mar 8 at 5:03
RN92
1,024725
asked Mar 8 at 4:31
VenVen
669
add a comment |
5
5
5
I'm trying to make a website that has footer menu. And i'm using container in my content since i don't know how to make it center. When I tried to apply the footer menu without using container. The background-color of the footer expand upward where the last div without container. And the text won't center.
Sample
It become like this when I use .mainbar:float:left; and .sidebar:float:right;
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar
float: left;
width: 736px;
.sidebar
float: right;
width: 214px;
#fnav
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
#fnav ul
display: flex;
list-style: none;
margin: auto;
width: 1000px;
#fnav ul li.fmenu-item
flex-grow: 1;
padding: 10px 0 10px 0;
#fnav ul li.fmenu-item a
color: #262d33;
text-decoration: none;
.copyright
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
html css bootstrap-4
edited Mar 8 at 5:03
RN92
1,024725
asked Mar 8 at 4:31
VenVen
669
I'm trying to make a website that has footer menu. And i'm using container in my content since i don't know how to make it center. When I tried to apply the footer menu without using container. The background-color of the footer expand upward where the last div without container. And the text won't center.
Sample
It become like this when I use .mainbar:float:left; and .sidebar:float:right;
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar
float: left;
width: 736px;
.sidebar
float: right;
width: 214px;
#fnav
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
#fnav ul
display: flex;
list-style: none;
margin: auto;
width: 1000px;
#fnav ul li.fmenu-item
flex-grow: 1;
padding: 10px 0 10px 0;
#fnav ul li.fmenu-item a
color: #262d33;
text-decoration: none;
.copyright
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
html css bootstrap-4
html css bootstrap-4
edited Mar 8 at 5:03
RN92
1,024725
asked Mar 8 at 4:31
VenVen
669
edited Mar 8 at 5:03
RN92
1,024725
asked Mar 8 at 4:31
VenVen
669
edited Mar 8 at 5:03
RN92
1,024725
edited Mar 8 at 5:03
RN92
1,024725
edited Mar 8 at 5:03
RN92
1,024725
1,024725
asked Mar 8 at 4:31
VenVen
669
asked Mar 8 at 4:31
VenVen
669
asked Mar 8 at 4:31
VenVen
669
669
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
2
Apply this style too, which resolve your problem.
footer
float: left;
width: 100%;
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
add a comment |
2
hope this is help you footer style
footer
float: right;
width: 100%;
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
Thanks. It's working but I usefloat: left;because the menu will move to right and it won't be center.
– Ven
Mar 8 at 5:01
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
add a comment |
1
No need to use Float if you are using Bootstrap 4. Please check below example maybe it's helps you.
.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>answered Mar 8 at 5:08
user10936942user10936942
1311
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55056757%2fbootstrap-container-conflict-with-css-footer-menu%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Apply this style too, which resolve your problem.
footer
float: left;
width: 100%;
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
add a comment |
2
Apply this style too, which resolve your problem.
footer
float: left;
width: 100%;
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
add a comment |
2
2
2
Apply this style too, which resolve your problem.
footer
float: left;
width: 100%;
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
Apply this style too, which resolve your problem.
footer
float: left;
width: 100%;
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
edited Mar 8 at 5:03
Udhav Sarvaiya
2,52392131
2,52392131
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
answered Mar 8 at 4:37
Sarabjit SinghSarabjit Singh
450214
450214
add a comment |
add a comment |
2
hope this is help you footer style
footer
float: right;
width: 100%;
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
Thanks. It's working but I usefloat: left;because the menu will move to right and it won't be center.
– Ven
Mar 8 at 5:01
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
add a comment |
2
hope this is help you footer style
footer
float: right;
width: 100%;
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
Thanks. It's working but I usefloat: left;because the menu will move to right and it won't be center.
– Ven
Mar 8 at 5:01
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
add a comment |
2
2
2
hope this is help you footer style
footer
float: right;
width: 100%;
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
hope this is help you footer style
footer
float: right;
width: 100%;
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
answered Mar 8 at 4:37
Mohammad MalekMohammad Malek
4051416
4051416
Thanks. It's working but I usefloat: left;because the menu will move to right and it won't be center.
– Ven
Mar 8 at 5:01
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
add a comment |
Thanks. It's working but I usefloat: left;because the menu will move to right and it won't be center.
– Ven
Mar 8 at 5:01
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
Thanks. It's working but I use
float: left; because the menu will move to right and it won't be center.– Ven
Mar 8 at 5:01
Thanks. It's working but I use
float: left; because the menu will move to right and it won't be center.– Ven
Mar 8 at 5:01
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
@Ven ok np always ready to help
– Mohammad Malek
Mar 8 at 5:02
add a comment |
1
No need to use Float if you are using Bootstrap 4. Please check below example maybe it's helps you.
.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>answered Mar 8 at 5:08
user10936942user10936942
1311
add a comment |
1
No need to use Float if you are using Bootstrap 4. Please check below example maybe it's helps you.
.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>answered Mar 8 at 5:08
user10936942user10936942
1311
add a comment |
1
1
1
No need to use Float if you are using Bootstrap 4. Please check below example maybe it's helps you.
.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>answered Mar 8 at 5:08
user10936942user10936942
1311
No need to use Float if you are using Bootstrap 4. Please check below example maybe it's helps you.
.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>.content-bar
min-height: 450px;
background: #ddd;
.side-bar
min-height: 450px;
background: #eee;
footer
background: #ccc;
margin-top: 15px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<header></header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-9">
<div class="content-bar">
Mainbar
</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="side-bar">
Sidebar
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
Footer
</footer>
</body>
</html>answered Mar 8 at 5:08
user10936942user10936942
1311
answered Mar 8 at 5:08
user10936942user10936942
1311
answered Mar 8 at 5:08
user10936942user10936942
1311
answered Mar 8 at 5:08
user10936942user10936942
1311
1311
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55056757%2fbootstrap-container-conflict-with-css-footer-menu%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
