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>
Related
I am trying to center a text with borders and a button in one row (like image of layout that I am trying to make and failing again and again.
I have tried with 2 column layout, one row, and two-column layout, simple div, container...etc. can anyone help me to center these two things in one line.
This will do the work for you:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-9 col-lg-9 col-md-9 col-xl-9">
<input type="text" class="form-control" placeholder="Text">
</div>
<div class="col-xs-3 col-lg-3 col-md-3 col-xl-3">
<button class="btn" value="SEARCH">SEARCH</button>
</div>
</div>
</div>
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/
In displays bigger than mobile I'd like to have this disposition (in this order):
column-A large 2 -
column-B large 8 -
column-C large 2
In mobile I'd like to have (in different rows) the shift of the first column after the second one:
column-B large 12 -
column-A large 6 -
column-C large 6
Someone could tell me if it is possibile and if yes how should I do? Thanks
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8"></div>
<div class="col-lg-2"></div>
</div>
</div>
If you're doing mobile first, you should define the columns in the HTML in the order you want first:
<div class="container">
<div class="row">
<div class="col-12">
B
</div>
<div class="col-6">
A
</div>
<div class="col-6">
C
</div>
</div>
</div>
That makes sure it will look like what you want in small devices. And then we can add more styles for large devices.
Then on bigger devices (you said bigger than mobiles), that corresponds to col-md-* class in bootstrap. You can add that to the columns.
Also since you want column A appear first, you can set their orders by using bootstrap class order-md-*. The smaller the order, the earlier position it will get.
<div class="container">
<div class="row">
<div class="col-12 col-md-8 order-md-2">
B
</div>
<div class="col-6 col-md-2 order-md-1">
A
</div>
<div class="col-6 col-md-2 order-md-3">
C
</div>
</div>
</div>
The result:
See fiddle: http://jsfiddle.net/aq9Laaew/61343/
To mobile use col-*:
Learn here :https://getbootstrap.com/docs/4.0/layout/grid/
and use order:https://getbootstrap.com/docs/4.0/utilities/flex/#order
See fiddle:https://jsfiddle.net/L50gsumj/3/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 col-6 order-2 order-md-1">a</div>
<div class="col-md-8 col-12 order-1 order-md-2">b</div>
<div class="col-md-2 col-6 order-3 order-md-3">c</div>
</div>
</div>
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 using bootstrap 4 and i have a list of items that i display like this :
<div class="container">
<div class="row">
<div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items">
...
</div>
</div>
</div>
In my desktop view with Google Chrome i can see 3 items by row but the problem is there is no space between columns. so i add a class item-wr
.item-wr {
margin: 10px;
}
But here also the line breaks and i see just 2 items, with some space on the right of the row.
So how can i keep my 3 items per row col-md-4 with space between them ?
P.S i want no space in the beginning or the ending of each row. the first col of each row must not have some margin-left and the last col of each row must not have some margin-right
You have to give card class inside col-md-4 col-sm-4 col-12. because col-md-4 col-sm-4 col-12 this class taking itself padding and give space so you can apply design related class inside column class.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
</div>
</div>
Use padding utility classes available with bootstrap 4 like pr-2 for padding right by 2 spacing units. Refer here
P.S. margin will add space outside of the box-model and hence you should use padding to prevent line breaks. For more info refer here