I am using bootstrap, and although my layout is very simple, there is a thing I cannot achieve.
I would like to add a new column next to a container div.
All I want is to keep the "container" layout and attach a "category" box at his left. Right now is too far away depending of the screen size.
This is the code right now:
<div class="container-fluid">
<div class="row" style="background-color:black;">
<div class="col-md-2" style="background-color:cyan;">Categories</div>
<div class="container" style="background-color:orange;">Container</div>
</div>
</div>
Update 1:
Update 2:
<!-- Example -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color:grey;">
Level 1: .col-sm-12
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
<div class="row" style="background-color:black;">
<div class="col-md-2 col-md-offset-1" style="background-color:orange;">
Level 2: .col-xs-8 .col-sm-6
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
<div class="container" style="background-color:red;">
Level 2: container
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
</div>
</div>
</div>
</div>
Try this:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">left side content</div>
<div class="col-md-8">middle content</div>
<div class="col-md-2">right side content</div>
</div>
</div>
Don't add container inside container-fluid, because container element has fix width, and your layout is fluid.
Read bootstrap documentation carefully :)
Related
I have 7 divs.
Since col can only go upto 12.
I cannot use .col-md-2 class to equally divide all.
So, I'm using the .col class to equally divide all.
Now to make it responsive I need to make all div width to 100% in mobile view.
Though col-xs-12 will work, but its not working on same div if i add class="col col-xs-12". Also, I cannot use class="col-md-2 col-xs-12" since I have 7 div's and col-md-2 will break 1 div.
Any suggestions about how to do it.
Since Boostrap 4 has a mobile first mentality, you have to think this way. So first declare the default class col-12 and then get back to desktop with col-md or col-lg depending on your needs.
It's explained better in B4 documentation found here: https://getbootstrap.com/docs/4.3/layout/grid/
So your div's will look like <div class="col-12 col-md"></div>.
Hope this answer helped!
since this question has the answer marked, but I think I still have to clarify some points.
When you use col-md (without col-md-[1-12]) combined with the intention of having 7 equal columns, Bootstrap 4 will use flex-grow: 1; as default. This might lead you to misunderstand that flex-grow: 1; will equally divide parent width into 7 small equal width. This won't work as you though if the content of any div has a width larger than a column width.
There is a simple formula to remember when it comes to flex width, it is:
content —> width —> flex-basis (limted by max|min-width)
There's an excellent article explaining this, you can visit here to see the difference between these two.
Back to your case, let's just say you have a div with 500px width, now all 7 divs won't have the same width. In this case, you should explicitly define a custom column grid. It will look like this:
<div class="container">
<div class="row">
<div class="col col-12 custom-col-7">Data</div>
...
</div>
</div>
#media screen and (min-width: 768px) {
.col.custom-col-7 {
flex: 0 0 auto;
width: calc(100%/7);
}
}
I made a simple sample to illustrate my point, hope this help
.col {
background: lightgreen;
margin-bottom: 50px;
}
#media screen and (min-width: 768px) {
.col.custom-col-7 {
flex: 0 0 auto;
width: calc(100%/7);
}
}
.box {
background: red;
width: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h4>Using `col-md`</h4>
<div class="container">
<div class="row">
<div class="col col-md col-12">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque officia, culpa, nemo numquam illum totam odio dolorem nisi ad in animi! Sequi illo voluptatem dolores.</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div>
</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id eaque iusto mollitia. Excepturi ea id cumque delectus facilis accusantium cum, ut itaque incidunt mollitia aspernatur, voluptates eligendi quibusdam iste facere sint soluta corporis et laborum porro, molestiae eaque sed molestias?</div>
</div>
</div>
<h4>Using custom column class</h4>
<div class="container">
<div class="row">
<div class="col custom-col-7 col-12">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis inventore aspernatur architecto consectetur nostrum consequatur, esse amet molestias labore fuga quis reiciendis nulla reprehenderit assumenda?a</div>
<div class="col custom-col-7 col-12">Col Data</div>
<div class="col custom-col-7 col-12">Col Data</div>
<div class="col custom-col-7 col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora, nam.</div>
<div class="col custom-col-7 col-12"><div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div></div>
<div class="col custom-col-7 col-12">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eveniet, mollitia accusamus nam consequuntur velit.</div>
<div class="col custom-col-7 col-12">Col Data</div>
</div>
</div>
Im designing a Bootstrap template that needs to have a sidebar on the left side (Logo, nav buttons and Contact Info) and Main content on the right side.
The problem is that i need the Contact Info div to go after the Main content div. How can i do this?
This is the code i have so far...but the contact info gets pushed to the bottom of the page (depending on the main content lenght), and i need it to be just after the sidebar links
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
NAVS LINKS
</div>
<div class="col-md-9">
MAIN CONTENT
</div>
</div>
<div class="row">
<div class="col-md-3">
CONTACT INFO
</div>
</div>
</div>
Is this what you want? try removing a row and put the contact info in the same column as the navbar links.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<li>HomePage</li>
<li>Buy</li>
<li>Sell</li>
<li>About us</li>
<li>Location </li>
<div class="contact">
CONTACT INFO<br>
John Smith<br>
+12346 306434<br>
johnsmith#internet.com<br>
</div>
</div>
<div class="col-md-9">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro sit
dignissimos ad, beatae amet dolorem voluptatibus nisi harum ab odit,
exomnis nobis facere nesciunt totam inventore rerum quos quaerat.
Lorem
ipsum dolor sit amet consectetur adipisicing elit. In saepe
provident
eligendi ex, eum consequuntur omnis nostrum amet maxime praesentium
sunt nulla velit sapiente similique id impedit optio laborum?
Distinctio.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro sit
</div>
</div>
if you want the contact info after the main content. just put it in the column as the content but if you want the contact info all across then just do a new row and set the column to 12.
<div class="row">
<div class="col-md-3"> <--- set this to 12 if you want it all the way across
CONTACT INFO
</div>
</div>
My agenda is to show an image and Details side by side in laptop and in responsive show them individually.. It works in non-responsive page showing the details side by side with col-md-6, but the code doesnt accept col-sm-12 for showing the details induvidually in responsive state
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="col-img" src="reference/about-us/choice.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Use img-fluid to image(see Fiddle:https://jsfiddle.net/gpLyvr5w/6/)
Learn here:https://getbootstrap.com/docs/4.0/content/images/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
well the code class="col-md-6 col-sm-12 padding-0" means that at screen ≥576px the element should take full width (aka width:100%) of available width but if the screen is ≥768px then the element should take half the available width (aka width:50%).
So if you need your div containing image and div with details to be side by side on screens ≥768px (usually tablets in portrait mode) then simply use col-md-6 you don't need to specify col-sm-12 as by default div elements are block level elements and take full width of available space.
Also you don't need padding-0 class you can use Bootstrap 4's spacing classes such as p-0, p-1, p-3, pt-1, py-3 etc. to remove or add padding so your final classes should look like this:
class="col-md-6 p-0"
You Need to give the extra class in first col-md-6 i have given class name res and write a media query for that like these
<style>
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.res{
min-width:100%;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0 res">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Hi All i have Solved this issue.. had MISSED OUT WITH THE META TAG IN HEADER
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Extend bootstrap row outside the container
(7 answers)
Closed 6 years ago.
Not a duplicate of this.
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
It should look like this:
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->
Bootstrap 5 beta
The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...
Bootstrap 5 example
Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-info">
<div class="row justify-content-end">
<div class="col-9"> ... </div>
</div>
</div>
<div class="col-6 bg-danger">
<div class="row justify-content-start">
<div class="col-9"> ... </div>
</div>
</div>
</div>
</div>
Bootstrap 5 nesting example
Bootstrap 4
The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.
Bootstrap 4 example
Bootstrap 3 (original answer)
Use another wrapper DIV around a 2nd container...
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>
EDIT
Use a psuedo element such as..
.right:before {
right: -999em;
background: rebeccapurple;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
Bootstrap 3 example
Similar question: Bootstrap container fill sides with colors
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Extend bootstrap row outside the container
(7 answers)
Closed 6 years ago.
Not a duplicate of this.
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
It should look like this:
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->
Bootstrap 5 beta
The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...
Bootstrap 5 example
Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-info">
<div class="row justify-content-end">
<div class="col-9"> ... </div>
</div>
</div>
<div class="col-6 bg-danger">
<div class="row justify-content-start">
<div class="col-9"> ... </div>
</div>
</div>
</div>
</div>
Bootstrap 5 nesting example
Bootstrap 4
The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.
Bootstrap 4 example
Bootstrap 3 (original answer)
Use another wrapper DIV around a 2nd container...
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>
EDIT
Use a psuedo element such as..
.right:before {
right: -999em;
background: rebeccapurple;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
Bootstrap 3 example
Similar question: Bootstrap container fill sides with colors