I am using Bootstrap v2.3.0 to design footer content. I am trying to use the bootstrap grid to order my columns. In v2.3.0 by using span(adding up to 12 cols), my columns are not covering the entire row.
Only in 980px screen, it's covering the entire row. But when screen size gets larger than 980px, some space is getting left or uncovered on the right side. I want the 3rd span part to be in the extreme right of the screen.
Please refer to the image for the output of my code.
(https://i.stack.imgur.com/SlfyQ.png)
Actually I want my output like below code:
[Required or Expected output][1]
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<div style="float:right;">.col-sm-6_Part-2</div>
<div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
</div>
</div>
</div>
What should I use to get it correct? Please help. Thanks in advance !!
Below is the current/wrong code.
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
</body>
Replace row class with row-fluid:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row-fluid">
<div class="span4" style="background-color:lavender;">span4</div>
<div class="span4" style="background-color:lavenderblush;">span4</div>
<div class="span4" style="background-color:lavender;">span4</div>
</div>
</div>
Here. I know you are using bootstrap v2 and I understand why but do this.
Do this
<div class="row" style="display: flex; justify-content: space-between">
I did inline style to not destroy other parts of code because bootstrap v2 is really old and I don't know how it will work if you put this CSS globally for every row element
It will put first span to left second span to center and third span to right of the screen.
Is this what you want to do? If not then post in comments.
UPDATE
If you only want to push the third element to the right and leave other two on their current places you can do this
<div class="span4" style="background-color:lavender; float: right">span4</div>
It will float that element to the far right of its parent
UPDATE 2
Based on new info I got from comment here is the solution
<div class="row">
You need
<div class="row-fluid">
row-fluid will take the whole width of parent and spans will stretch
This is a bootstrap 2 feature. Read more about it here
check this:
minimum amount of code:
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
<div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
</div>
</div>
check :https://jsfiddle.net/sugandhnikhil/ut8d0j3m/
Related
Looking at bootstrap v4 updates:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
But when I use the order function it doesn't seem to work the same as the push pull method. It stacks the rows up just like the first row in the code below.
My goal is to have a img on the left with text on the right on one row then text on the left and a img on the right on the next row on a desktop. When its resized in a smaller screen I would like each image stacked on top of the text it corresponds with.
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>
If you want to change order for example on md you can define first normal order for that size and then order-n for all smaller sizes. So your code should look like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
img
</div>
<div class="col-md-8">
text
</div>
</div>
<div class="row">
<div class="col-md-8 order-2 order-md-1">
text
</div>
<div class="col-md-4 order-1 order-md-2">
img
</div>
</div>
</div>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I want a Bootstrap column to resize buttons nicely when the screen type changes. But the buttons end up with no space between them and and two separate lines (on the small screen).
How do I get them to resize into smaller buttons, and not split onto a new line?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example!</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-3 col-xs-offset-4">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want the same styling for small devices as well as large devices, you can omit the md styling and just use sm. If the width get's really small, you can remove the offset and use that gained width on the elements instead on xs widths.
To fix the buttons being cut off, remove the btn-block class.
Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
Add Item
</div>
<div class="col-sm-3 col-xs-6">
Remove Item
</div>
</div>
As a side note, if you want the buttons to be centered here, use offset 3 instead of 4.
If i am clear then try my updated code.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6 text-center">
Add Item
</div>
<div class="col-sm-3 col-xs-6 text-center">
Remove Item
</div>
</div>
You could use col-xs-3 instead of col-md-3 and col-xs-offset-4 instead of col-md-offset-4
Remember that bootstrap grid row is of 12 column, so what ever offset or column you are using it should add up to 12 and to target small screen devices such as mobile use col-xs-*. Everything else is fine.
<div class="form-group">
<div class="col-xs-3 col-xs-offset-6">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>