Ggtcf

Why can Carol Danvers change her suit colours in the first place?

How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?

Should I outline or discovery write my stories?

The screen of my macbook suddenly broken down how can I do to recover

Does an advisor owe his/her student anything? Will an advisor keep a PhD student only out of pity?

Open a doc from terminal, but not by its name

Count the occurrence of each unique word in the file

Non-trope happy ending?

Is it safe to use olive oil to clean the ear wax?

If a character has darkvision, can they see through an area of nonmagical darkness filled with lightly obscuring gas?

Not using 's' for he/she/it

Which one is correct as adjective “protruding” or “protruded”?

How to bake one texture for one mesh with multiple textures blender 2.8

What does "Scientists rise up against statistical significance" mean? (Comment in Nature)

Is there a name for this algorithm to calculate the concentration of a mixture of two solutions containing the same solute?

copy and scale one figure (wheel)

How to explain what's wrong with this application of the chain rule?

Are paving bricks differently sized for sand bedding vs mortar bedding?

Electoral considerations aside, what are potential benefits, for the US, of policy changes proposed by the tweet recognizing Golan annexation?

Longest common substring in linear time

Did arcade monitors have same pixel aspect ratio as TV sets?

Removing files under particular conditions (number of files, file age)

Why is it that I can sometimes guess the next note?

How do I color the graph in datavisualization?

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?

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

share|improve this question

edited Mar 8 at 5:03

RN92

926724

asked Mar 8 at 4:31

VenVen

649

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

share|improve this question

edited Mar 8 at 5:03

RN92

926724

asked Mar 8 at 4:31

VenVen

649

add a comment | 

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

share|improve this question

edited Mar 8 at 5:03

RN92

926724

asked Mar 8 at 4:31

VenVen

649

 <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>

#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;

share|improve this question

edited Mar 8 at 5:03

RN92

926724

asked Mar 8 at 4:31

VenVen

649

share|improve this question

edited Mar 8 at 5:03

RN92

926724

asked Mar 8 at 4:31

VenVen

649

edited Mar 8 at 5:03

RN92

926724

edited Mar 8 at 5:03

RN92

926724

asked Mar 8 at 4:31

VenVen

649

asked Mar 8 at 4:31

VenVen

649

3 Answers
3

active

oldest

votes

2

Apply this style too, which resolve your problem.

footer 
 float: left;
 width: 100%;

share|improve this answer

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

add a comment | 

2

hope this is help you footer style

footer 
 float: right;
 width: 100%;
 

share|improve this answer

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

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>

share|improve this answer

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

Name

Email

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

Name

Email

Required, but never shown

2

Apply this style too, which resolve your problem.

footer 
 float: left;
 width: 100%;

share|improve this answer

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

add a comment | 

2

Apply this style too, which resolve your problem.

footer 
 float: left;
 width: 100%;

share|improve this answer

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

add a comment | 

Apply this style too, which resolve your problem.

footer 
 float: left;
 width: 100%;

share|improve this answer

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

footer 
 float: left;
 width: 100%;

share|improve this answer

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

edited Mar 8 at 5:03

Udhav Sarvaiya

2,43872131

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

answered Mar 8 at 4:37

Sarabjit SinghSarabjit Singh

16914

2

hope this is help you footer style

footer 
 float: right;
 width: 100%;
 

share|improve this answer

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

2

hope this is help you footer style

footer 
 float: right;
 width: 100%;
 

share|improve this answer

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

hope this is help you footer style

footer 
 float: right;
 width: 100%;
 

share|improve this answer

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

footer 
 float: right;
 width: 100%;
 

share|improve this answer

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

answered Mar 8 at 4:37

Mohammad MalekMohammad Malek

403316

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>

share|improve this answer

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>

share|improve this answer

answered Mar 8 at 5:08

user10936942user10936942

1311

add a comment | 

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>

share|improve this answer

answered Mar 8 at 5:08

user10936942user10936942

1311

.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>

share|improve this answer

answered Mar 8 at 5:08

user10936942user10936942

1311

answered Mar 8 at 5:08

user10936942user10936942

1311

answered Mar 8 at 5:08

user10936942user10936942

1311