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>
Related
No matter what I try, my footer is not filling the full screen width. What can I do?
body width 100% did not work
I tried this, too: Bootstrap Footer, Full Width Of Page
I am working in Angular 11 & Bootstrap 5.
html
<div class="container">
<div class="row align-items-center">
<div class="contentLeftCorner col-sm-4">
<div class="footerComponents me-5" >sth</div>
</div>
<div class="contentCenter col-sm-4"></div>
<div class="contentRightCorner col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="footerComponents me-5">1</div>
<div class="footerComponents me-5">2</div>
<div class="footerComponents me-5">3</div>
<div class="footerComponents me-5">4</div>
</div>
<div class="col-sm-6">
<div class="footerComponents 5 me-5">a</div>
<div class="footerComponents 5 me-5">b</div>
<div class="footerComponents 5 me-5">c</div>
<div class="footerComponents 5 me-5">d</div>
</div>
</div>
</div>
</div>
</div>
CSS
.footerComponents:hover {
cursor:pointer ;
color: dimgrey;
}
.footerComponents{
border-color: transparent;
}
//no borders on clicked element
*:focus {
outline: 0;
}
.contentRightCorner {
font-size: 0.7rem;
}
Set .conatainer's padding to 0, and .row's width to 100% and remove gutter position on .row. Also remove me-5 class from footerComponents.
.container {
padding: 0 !important;
background-color: aquamarine;
}
.row {
--bs-gutter-x: 0 !important;
width: 100%;
}
.footerComponents {
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row align-items-center">
<div class="contentLeftCorner col-sm-4">
<div class="footerComponents">sth</div>
</div>
<div class="contentCenter col-sm-4"></div>
<div class="contentRightCorner col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="footerComponents">1</div>
<div class="footerComponents">2</div>
<div class="footerComponents">3</div>
<div class="footerComponents">4</div>
</div>
<div class="col-sm-6">
<div class="footerComponents">a</div>
<div class="footerComponents">b</div>
<div class="footerComponents">c</div>
<div class="footerComponents">d</div>
</div>
</div>
</div>
</div>
</div>
Note: I have added background-color and border properties to show the exact positions.
Hope, this will help you.
I think this is due to your footerComponents being inside of <div> with the class container. As Bootstrap 5 has set a max-width for the container class on certain size screen. The container class is only 100% on extra small screen. You can refer to the documentation here.
.container max-width
Extra small <576px : 100%
Small ≥576px : 540px
Medium ≥768px : 720px
Large ≥992px : 960px
X-Large ≥1200px : 1140px
XX-Large ≥1400px : 1320px
You can try and bring the footerComponents <div> outside of the container <div> for this.
The other option is to go with container-fluid class which is 100% at all breakpoints.
Put it outside of container DIV.
I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. Please see the below images for better understand.
HTML
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9" style="float:right;">
Div3
</div>
<div class="col-md-3" style="float:left;">
Div2
</div>
</div>
NOTE: I am using bootstrap 3
How to do that?
Anybody help please ?
You need to use Grid: column ordering
According to the mobile-first concept you need to define default view for mobile first in the right order.
section 1
section 3
section 2
Then assign col-md-push-3 for section 3 and col-md-pull-9 for section 2 and define its width using col-md- class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>section 1</div>
</div>
<div class="col-xs-12 col-md-9 col-md-push-3">
<div>section 3</div>
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">
<div>section 2</div>
</div>
</div>
</div>
I answered something similar to this question before. reordering col-12 are not possible with bootstrap-3 (push/pull). You can use grid together with a media query to do this.
<div class="row reordered">
<div class="col-md-12">
Div1
</div>
<div class="col-md-3">
Div2
</div>
<div class="col-md-9">
Div3
</div>
</div>
css
#media screen and (max-width: 992px) { //col-md breakpoint
.reordered {
display: grid;
}
.reordered.col-md-3 {
order: 2;
}
.reordered.col-md-9 {
order: 1;
}
}
use col-sm-12 hopefully it will work
try this:
#media only screen and (max-width: 400px) {
.row {
display: grid !important;
grid-template-columns: auto !important;
}
}
My homepage consists of multiple blocks(top part/mid part/bottom part). I've created a row for each block. I want to add some space between my blocks in Bootstrap. Can I simply give my rows id's and add some margin, or is this wrong?
Structure of my code:
<div class="container" id="ho_main_content">
<div class="row">
<div class="col-md-12 text-center"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
This "answer" of mine should really be a comment; however, I don't have enough rep.
For an answer, yes, give the divs with the row class another class, probably something like this, spacing the top and bottom of each 10px:
.part {
margin: 10px 0;
}
An important thing to think about when using frameworks like bootstrap is that it isn't the end of the world if you modify the components or spacing or something. Some things won't look like you want them to; just give them extra classes, or if you are desperate, use the !important flag. It was built on the same technology, after all.
In bootstrap 5 I add g-0 to g-5 class with row class to add space around each col.
EX.
<div class="row g-3">
<div class="col">...</div>
<div class="col">...</div>
</div>
https://getbootstrap.com/docs/5.0/layout/gutters/
/*you can create your own custom css for use here is some example*/
.border {
border: 1px solid red; /* just to make sure space between blocks*/
}
.margin-top {
margin-top: 5px;
}
.nopad{
padding:0 ;
}
div[class*='spacer-'] { display: block; }
.spacer-mini { height: 20px; }
.spacer-small { height: 40px; }
.spacer-medium { height: 60px; }
.spacer-big { height: 100px; }
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main_content">
<div class="row border margin-top">
<div class="col-md-12 text-center">text1</div>
</div>
<div class="row border margin-top">
<div class="col-md-12">text2</div>
</div>
<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top -->
<div class="row">
<div class="col-md-6 col-xs-6 border">part1</div>
<div class="col-md-6 col-xs-6 border">part2</div>
</div>
</div>
</body>
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 trying to have 4 cols inside a row with equal margins but i did not get the desired look
here is my html code
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3">2500</div>
<div class="col-sm-3">1300</div>
<div class="col-sm-3">1000</div>
<div class="col-sm-3">1000</div>
</div>
</div>
css code
.summary_boxes div
{
background-color:#eee;
border: 1px solid #DDDDDD;
border-radius:3px;
}
and this is the result
The issue is that Bootstrap uses padding for columns and columns themselves shouldn't have additional styles applied directly to them.
What you should do is make child elements of the columns and give those the style you want, then you will have the "margin" you are looking for.
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3"><span>2500</span></div>
<div class="col-sm-3"><span>1300</span></div>
<div class="col-sm-3"><span>1000</span></div>
<div class="col-sm-3"><span>1000</span></div>
</div>
</div>
</div>
With the style:
.col-sm-3 > span {
background: red;
display: block;
}
Here is a working fiddle, you might have to make the output window wider to correctly see the result depending on your screen resolution http://jsfiddle.net/LysqB/