I'm using Semantic UI and can't properly set the grids. According to the docs, Semantic UI uses 16 columns and I'm trying to have a column with width of three on the left side and next to it a column with the width of thirteen. This is how it looks (pic is cropped):
I have used Bootstrap for a long time and now trying to use Semantic UI. What am I missing? Demo
<header>
<div class="mobile hidden">
<div class="ui container">
<div class="ui grid">
<div class="eight column">
<div class="ui secondary menu">
<a class="active item">
Home
</a>
<a class="item">
Messages
</a>
<a class="item">
Friends
</a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item">
Logout
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="clearing"></div>
<div class="ui container">
<div class="mobile hidden">
<div class="ui grid row">
<aside class="three column red">
</aside>
<section class="thirteen column olive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente!
</section>
</div>
</div>
</div>
you are missing two additional classes wide and field in your HTML element. change that like below
<aside class="three wide field column red"></aside>
<section class="thirteen wide field column olive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente!
</section>
Related
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>
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
when home page show, about part show on slide part about .30 second. but when about html code set where about view its ok. this page add under layout page. main css add layout , here just slider+about view page code add. it's asp.net MVC project.
<!-- Slider -->
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="~/Content/public_content/img/slides/1.jpg" alt="" />
<div class="flex-caption">
<h3>HEART SPECIALIST</h3>
<p>Doloribus omnis minus temporibus perferquam</p>
</div>
</li>
<li>
<img src="~/Content/public_content/img/slides/2.jpg" alt="" />
<div class="flex-caption">
<h3>BETTER CARE</h3>
<p>Lorem ipsum dolo amet, consectetur provident.</p>
</div>
</li>
</ul>
</div>
<!-- About-->
<section id="call-to-action-2">
<div class="container">
<div class="row">
<div class="col-md-10 col-sm-9">
<h3>Welcome to MEDICO Hospitals</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro consequatur aliquam, incidunt eius magni provident, doloribus omnis minus temporibus perferendis nesciunt quam repellendus nulla nemo ipsum odit corrupti</p>
</div>
<div class="col-md-2 col-sm-3">
Read More
</div>
</div>
</div>
</section>
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 :)