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>
Related
I have an HTML defined as follows:
<div id="container" className='row'>
<div className='col-sm-9 col-md-6 col-lg-8'>
</div>
<div className='col-sm-3 col-md-6 col-lg-4'>
<button id="bot" />
</div>
</div>
So, I want the button with the id of bot (or its container div) to be placed at the bottom relative to the container div with the class row.
I tried to do this:
#container
{
position: relative;
}
#bot
{
position: absolute;
bottom: 0;
}
But, this changes the design considerably, as it will push the bot to the left and on top of its sibling div. As you can see I'm using Bootstrap for dividing it into grids. How can I push this button to the bottom with CSS in my case?
Use d-flex at div and align-self-end for button
Example : https://jsfiddle.net/guiljs/rupoc45j/
<div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
<button id="bot" class=" align-self-end">
Button at Bottom!
</button>
</div>
If you're using React, just change class to className as your sample code.
Using display:flex; you can make the contents of the second column align to the end of the column.
.full-height {
min-height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container py-3 full-height">
<div class='row'>
<div class='col-sm-9 col-md-6 col-lg-8'>
This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This
column has content. This column has content. This column has content.
</div>
<div class='col-sm-3 col-md-6 col-lg-4 d-flex flex-column justify-content-end'>
<button>Button</button>
</div>
</div>
</div>
You're looking for Bootstrap's align-items-end property. Here is a runnable example:
#container {
position: relative;
height: 100px;
width: 300px;
background: gray;
}
#bot {
background: black;
width: 50px;
height: 50px;
}
#first {
height: 100%;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div id="container" class='row align-items-end'>
<div id="first" class='col-sm-9 col-md-6 col-lg-8'>
</div>
<div class='col-sm-3 col-md-6 col-lg-4'>
<button id="bot" />
</div>
</div>
If you only want just that one item aligned to the bottom, see Guilherme de Jesus Santos's answer for an example using align-self-end.
Try #bot's container css
as
'{
height:100%;
}`
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
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 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>
I have been hitting a area which I dont belive is coverd in the bootstrap documentation which is to add margins to col in bootstrap.
To fix this I used the following code but the issue is the centre box is always smaller then the outer two.
Does anyone have a fix to this?
HTML
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="marginBoxes noMarginLeft">
<div class="clearBoth"></div>
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="marginBoxes">
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="marginBoxes noMarginRight">
</div>
</div>
</div>
CSS
.marginBoxes {
margin-left: 20px;
margin-right: 20px;
}
.noMarginLeft{
margin-left:0 !important;
}
.noMarginRight{
margin-right:0 !important;
}
Live Preview #
As suggested in the comments, I'd leave Bootstrap alone and make the boxes separate, possibly something along these lines:
#lightBlueFix { background-color: blue; }
#lightGrey { background-color: grey; }
#lightYellow { background-color: yellow; }
.bannerBox {
margin-left: 20px;
margin-right: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4">
<div id="lightBlueFix" class="bannerBox">
Blue
</div>
</div>
<div class="col-lg-4">
<div id="lightGrey" class="bannerBox">
Grey
</div>
</div>
<div class="col-lg-4">
<div id="lightYellow" class="bannerBox">
Yellow
</div>
</div>
</div>