This question already has answers here:
Bootstrap xs columns wrap
(2 answers)
Bootstrap grid with fixed wrapper - Prevent columns from stacking up
(1 answer)
Closed 4 years ago.
All OK: http://prntscr.com/iqo8f7
When I make width smaller: http://prntscr.com/iqo8nj
My button on the right is not responsive. It's ok if the width is big, otherwise it doesn't seem to resize correctly.
Any idea why?
<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="row">
<div class="col-sm-11">
<h5 class="inline" style="vertical-align: sub"> Status: </h5>
<span class="label label-warning label-lg-status">In Progress</span>
<hr>
</div>
<div class="col-sm-1">
<button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
</div>
</div>
The main issue comes from the bootstrap column settings needed. If you follow the doc, you have to set all your <div class="row"> inside a <div class="container"> or a <div class="container-fluid">
so if you do the good way it's working well :
<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-fluid">
<div class="row">
<div class="col-sm-11">
<h5 class="inline" style="vertical-align: sub"> Status: </h5>
<span class="label label-warning label-lg-status">In Progress</span>
<hr>
</div>
<div class="col-sm-1">
<button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
</div>
</div>
</div>
Related
I have a 'right-float' classed div placed inside a 'w-100' classed div. Inside the right-floated div I want to display at the top a button with 3 points inside (...) and at the bottom another Icon (see images below). So I added 'h-100' class to the float-right div and created two divs inside it: the first one with the ... button inside and the second one with 'align-bottom' class.
Problemthe second div does not stay at the bottom, I think because h-100 is not working as expected
Observed behaviour
Expected behaviour
HTML Tree
Example snippet
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="clearfix w-100 border border-primary">
<div class="float-right h-100">
<div class="clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">...</button>
</div>
</div>
<div class="align-bottom clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">BTN2</button>
</div>
</div>
</div>
<div>
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
</div>
</body>
</html>
h-100 is working as expected, because the height is 100% of the childs inside. It is not usable to stretch a div to its parent height.
You could use flex, to make it work right
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-stretch border border-primary">
<div class="flex-grow-1">
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
<div class="d-flex flex-column bg-danger">
<div class="flex-grow-1">
<button class="btn btn-sm">...</button>
</div>
<div>
<button class="btn btn-sm">BTN2</button>
</div>
</div>
</div>
</body>
</html>
I am trying to set a redigera button after the avsluta button
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
why my redigera button not set after the avsluta button
what I am trying
first I give the space 4 and then 4 and then 4 but avsluta button is set the below line
again I give the space 4 and then 3 and then 2 but avsluta button is set the below line
but not work
I am making a mistake partition of bootstrap or too many space I give
Reference:
Add "d-flex flex-row" to the div containing the buttons.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4 d-flex flex-row">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
Just add btn class for the button. By default all html elements are block elements. This will take a complete row for the display of the element. adding btn class will make the button an inline-block element. This will allow multiple elements in the same line.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control btn btn-primary" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control btn btn-primary" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
https://codepen.io/shaan046/pen/vWmVNY
HTML code:
<body>
<div id="header" class="row">
<div class="col-md-1 col-lg-1"><h3 id="myText">Shantanu Tomar</h3</div>
<div class="col-md-offset-5 col-md-2 col-lg-offset-5 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
CSS Code
#header{
background-color:red;
}
JS code:
$(document).ready(function() {
$("body").addClass("container-fluid");
});
What I want is that the text “Shantanu Tomar” and 3 buttons on screen should come in div #header in a single row. I am using Bootstrap3. Not sure how I can provide col-- tags so that the webpage is visible on Phone, tablet, Laptop in right manner? I tried using lg and md classes but the buttons are not lining up with text “Shantanu Tomar”.
Thanks for the help!!
Try like this. and learn bootstrap from W3schools https://www.w3schools.com/bootstrap/
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="header" class="row">
<div class="col-md-12 col-lg-12">
<div class="col-md-3 col-lg-3">
<h3 id="myText">Shantanu Tomar</h3></div>
<div class=" col-md-2 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
Just use col-xs-3 (since you have four elements) if you want the elements to be in a single row, and no need for jquery here.
#header {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="header" class="row">
<div class="col-xs-3">
<h3 id="myText">Shantanu Tomar</h3>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">Button1</button>
</div>
<div class="col-xs-3">
<button class="btn">Button2</button>
</div>
<div class="col-xs-3">
<button class="btn">Button3</button>
</div>
</div>
</div>
Why do not use a <ul> ?
Something like this :
<div id="header" class="row">
<ul class="list-inline">
<li><button class="btn btn-primary">Button1</button></li>
<li><button class="btn btn-primary">Button2</button></li>
<li><button class="btn btn-primary">Button3</button></li>
</ul>
</div>
I am trying to make a grid of buttons using bootstrap, however, when I change screen size on a desktop the layout jumps to the new position, i have seen in other questions that the answer was to change it to continer-fluid and row-fluid within the div, however this did not help.
My CSS and HTML is
.top-buffer
{ margin-top:10px;
margin-bottom: 10px;
}
<!-- Turn off zooming on Mobile page-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<p> This is the nav bar</p>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. -->
<div class="row-fluid top-buffer"><!-- open the first row int he grid-->
<div class="col-md-4 col-md-offset-4"> <div class="col-sm-4 col-xs-4" >
<form action="page2JobMainMenu.html">
<button type="submit" class="btn btn-default center-block"> Job </button>
</form>
</div>
<div class=" col-sm-4 col-xs-4">
<form action= "page3CreateQuote.html">
<button type="button" class="btn btn-default center-block">
Quote </button>
</form>
</div>
<div class="col-sm-4 col-xs-4">
<form action="page4FinanceMainMenu.html">
<button type="button" class="btn btn-default center-block">
Finance</button>
</form>
</div>
</div><!--close off the cold md 4 div-->
</div><!-- Close the first row-->
</div><!-- Close the Fluid Container -->
</div><!--Close the Jumbotron-->
Any help is much appreciated.
Thanks
Your code basically works as is. Using col-xs-4 ensures that at even the smallest resolution the buttons will still retain their 3-column layout. It's not necessary to use col-md-4 in this instance, and .row-fluid has not been in use since Bootstrap 2. .center-block is also unnecessary as .btn-block is designed to treat Bootstrap Buttons as full-width elements.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
</div>
</div>
Note: If you can avoid using the <button> within a <form> you can make use of Bootstrap's .btn-group component for greater functionality.
I've made a small little Bootstrap panel, and I have 3 Bootstrap buttons in the panel at the bottom. What I'm trying to do is make all the buttons be on one line and have a small gap, not bunched together. Here's what I have right now, and here's what it's doing:
.recent
{
margin-top: 50px;
margin-right: 500px;
}
.recent input
{
float: left;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="recent">
<div class="container">
<div class="col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<input type="button" value="View all" onClick="#" class="btn btn-primary">
<input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger">
<input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning">
</div>
</div>
</div>
</div>
</div>
What's happening is this:
https://gyazo.com/46b7c219adc26be516475c8f3b4d803d
Is there any way to make them stay on one line, or would I have to make the column larger?
You'll need to make the column width wider. Since you're using col-lg-3 class, the last button is wrapping to the next line. Try changing it to a larger column (i.e. col-lg-6). To answer the second part of your question, you can add a CSS rule like .btn {margin: 0 5px;} if you want some space between the buttons.
you can also achieve with out using float property. You use display:inline-block instead of float.
or you use 3 multiple division(.col-sm, .col-md, .col-lg) in .row or .container
You can try this code
<div class="recent">
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<div class="col-lg-2"><input type="button" value="View all" onClick="#" class="btn btn-primary"></div>
<div class="col-lg-2"><input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger"></div>
<div class="col-lg-2"><input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning"></div>
</div>
</div>
</div>
</div>
</div>
Here are few points.
Why are you giving 500 margin right to recent class? it will create problem in responsiveness. Even if you are targeting only desktop screen it is not good practice. 500 margin forcing to reduce width of recent.
you are using col-lg-3 It might be fine to use col-lg-3 for larger screens more than 1200px wide.. for small screens there are col-md-3, col-sm-3 and col-xs-3
Give a little margin-right to buttons so that they have a little space.
.recent
{
margin-top: 50px;
}
.recent input
{
float: left;
}
.m-right{
margin-right:5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="recent">
<div class="container">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<input type="button" value="View all" onClick="#" class="btn btn-primary m-right">
<input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger m-right">
<input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning m-right">
</div>
</div>
</div>
</div>
</div>