How can I make a column within a row have a "col-6" with a "container" and in another "col-6" have a "container-fluid". Sort of like the picture. The code I tried to make is below.
HTML
<div class="main">
<div class="container">
<div class="row">
<div class="col-sm-6 c-1">
<div class="container">
<div class="row">
<div class="teste col-sm-12">aaaaa</div>
</div>
</div>
</div>
<div class="col-sm-6 c-2">
<div class="fluid-container">
<div class="row">
<div class="teste2 col-sm-12">aaa</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.col-sm-6 {
height: 700px;
}
.c-1 {
background: #ccc;
}
.c-2 {
background: #ddd;
}
.teste {
background: cyan;
}
.teste2 {
background: blue;
}
Below, as i hope be
I recently came across this problem myself. Depending on which version you are on Bootstrap (I used latest Bootstrap 4.4) you can take a look at what I did in a recent project here: https://www.codeply.com/p/0ZqAg6HUHX
I offset the columns to display the column on the right in full width. The code is responsive as well and breaks on mobile view.
The reason this works is because offsetting columns will be pushed to one side. Then add a class of p-0 to the column and you'll have a full width column with no padding.
You can check the documentation for more info on this part:
https://getbootstrap.com/docs/4.4/layout/grid/#offsetting-columns
Related
I'm new to web development and I'm trying to create a very simple card-based "dashboard" page in HTML and CSS.
You can see basic example of this (with the content cut out) on jsfiddle. As you can see I've got two basic card sizes, large and small, which are set to float left and thus take up remaining space using the following CSS classes:
.small-card, .large-card {
border: 1px solid gray;
border-radius: 3px;
margin: 2px;
float: left;
width: 250px;
height: 250px;
}
.small-card {
height: 122px;
}
But the issue you may have spotted is that the larger cards will block smaller cards from taking up space to their lower left, leading to gaps in the layout depending on the screen size or card order. It's clear to me now that the float property alone won't give me the result i'm looking for.
My question is, can this be resolved in a way that keeps the overall simplicity of the dashboard, without changing the order that the cards are defined in the HTML? I just want the cards to take up the top-left-most available space without leaving any gaps.
I have a feeling it's not going to be simple, but any suggestions appreciated. Thanks.
Try using the bootstrap grid system for this.
Here is some code using it along with your css:
.small-card, .large-card {
border: 1px solid gray;
border-radius: 3px;
height: 250px;
}
.small-card {
height: 125px;
}
}
<div class='row'>
<div class="col-xs-12">
<div class="col-xs-6 large-card">1</div>
<div class="col-xs-6">
<div class='row'>
<div class="col-xs-12 small-card">2</div>
</div>
<div class='row'>
<div class="col-xs-12 small-card">3</div>
</div>
</div>
<div class='row'>
<div class="col-xs-6 small-card">4</div>
<div class="col-xs-6 small-card">5</div>
</div>
<div class="col-xs-6">
<div class='row'>
<div class="col-xs-12 small-card">6</div>
</div>
<div class='row'>
<div class="col-xs-12 small-card">7</div>
</div>
</div>
<div class="col-xs-6 large-card">8</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I need to adjust Bootstrap columns to look like this.
The thing is that on smaller devices I just want to hide this blank areas on the sides, thus I don't wanna use just margins or paddings.
How can I achieve that? col-md-1 seems too small for the indents, while col-md-2 is too broad.
My Codepen with Bootstrap included.
HTML
<div class="container">
</div>
CSS
.container {
height: 230px;
background-color: blue;
max-width: 1050px;
padding-left: 15px;
padding-right: 15px;
}
If you don't want to declare any new classes padding etc. You can simply nest the columns bootply.com
Not really sure what you're trying to achieve here. The container changes it width depending on the screen size using media queries. The white/blank space you're trying to get rid off is disappearing when the size of the screen is less than 768px.
What you can do, if I understand your question correct is this option:
HTML:
<!-- CONTAINER -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER FLUID -->
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
CSS:
.container-fluid,
.container {
height: 230px;
background-color: #333;
/* max-width: 1050px; */
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
}
html, body {
color: #fff;
}
Couldn't you just use a #media tag to cut the padding out when in mobile view? Makes it a lot easier. Just add the class below to either your container or row.
.marginClass{
margin: 0 15px 0 15px;
}
#media screen and (min-width: 480px) {
.marginClass{
margin: 0;
}
Actually you're probably better using margin. I've updated that.
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I'm having a tough time wrapping my mind around how to achieve vertical spacing with the bootstrap grid system. I want one box to be 1/3 from the top and left and another to take up 1/3 from the bottom, but be full-width. I have three rows right now spanning 12, 6, and 12 columns respectively:
An example layout using draw.io:
Within the body tag of index.html:
<body>
<br>
<br>
<br>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<div class="col-md-12 col-sm-12 col-xs-12 text-left">
<h1><strong>I am strong<strong><span class="lead">i am less strong</span></h1>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="assets/third-party/js/jquery.min.js"></script>
<script src="assets/third-party/js/bootstrap.min.js"></script>
</body>
One trick is to force the height of your container to fill the whole page with a line of jQuery. You don't need jQuery for this, but I noticed that you already include it on your page.
The markup:
<div class="container full-page-height">
<div class="row offset-top-third">
<div class="col-md-6 col-md-offset-3 white">
<h1>Hey you!</h1>
</div>
</div>
<div class="row offset-bottom-third">
<div class="bgimg">Background image here</div>
</div>
</div>
The CSS:
.bgimg {
background: #333;
color: #eee;
}
.white {
background: #fff;
}
.offset-top-third {
position:relative;
top: 33.333%;
height: 33.333%;
background: #888;
}
.offset-bottom-third {
position:relative;
top: 66.667%;
height: 33.333%;
background: #888;
}
The Javascript:
$(function() {
var h = window.innerHeight;
$(".full-page-height").css({height: h});
});
The bootply.
If your vertical columns are div's, then give each one a margin value in pixels to space them away from each other. Then set the width of each column to a percent value so they fit the whole window.
I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>