I have tried multiple solutions but I was not able to achieve what I'm trying to achieve.
I've build a php file that controls different components on a raspberry pi. Therefore I have 4 rows of buttons that I would like to center in the middle of the screen as a responsive design, no matter what the resolution is (xl,lg,md,sm).
The code so far is:
<!DOCTYPE html>
<html lang='us'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
<meta name='viewport' content='width=device-width' />
<style>
.input-group-button {
padding: 0;
border:none;
background: none;
}
.input-group .input-group-button:first-child .btn{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.input-group select.form-control{
-webkit-appearance: none;
}
</style>
</head>
<body>
<form class='justify-content-center' method='post' action='../index.php'>
<div class='row justify-content-center form-group'>
<div class='col-xl-2 col-lg-2 col-md-2 col-sm-2 text-center'>
<div class='input-group'>
<select name='2812efct' id='2812efct' class='form-control'>
<option selected>Select Effects</option>
<option value='0'>All Effects</option>
<option value='1'>Effect 1</option>
<option value='2'>Effect 2</option>
<option value='3'>Effect 3</option>
</select>
<div class='input-group-addon input-group-button'>
<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
</div>
</div>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
</div>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>
The Buttons seem to be somehow in the center but left aligned and if the screen goes smaller the buttons are going to stick on the left hand side.
I'm not sure I fully understand what yuo wanr, but maybe just remove col-xl-2 col-lg-2 col-md-2 col-sm-2 from everywhere.
.input-group-button {
padding: 0;
border:none;
background: none;
}
.input-group .input-group-button:first-child .btn{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.input-group select.form-control{
-webkit-appearance: none;
}
<!DOCTYPE html>
<html lang='us'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
<meta name='viewport' content='width=device-width' />
</head>
<body>
<form class='justify-content-center' method='post' action='../index.php'>
<div class='row justify-content-center form-group'>
<div class='text-center'>
<div class='input-group'>
<select name='2812efct' id='2812efct' class='form-control'>
<option selected>Select Effects</option>
<option value='0'>All Effects</option>
<option value='1'>Effect 1</option>
<option value='2'>Effect 2</option>
<option value='3'>Effect 3</option>
</select>
<div class='input-group-addon input-group-button'>
<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
</div>
</div>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
</div>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>
Related
I bought a react template online I couldn't figure it out why this form search bar is hidden on small screen size.
<div className="col-lg-8 col-xxl-4-5col d-none d-lg-block">
<div className="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">
I tried changing "d-none d-lg-block" to "d-block" but still did not work
I am not a css expert so I need a work around to make it work .
here is the full div html code:
I need form to be displayed on all screen size
<div className="header-middle">
<div className={container}>
<div className="row">
<div className="col-auto col-lg-3 col-xl-3 col-xxl-2">
<button className="mobile-menu-toggler">
<span className="sr-only">Toggle mobile menu</span>
<i className="icon-bars"></i>
</button>
<Link to={`${process.env.PUBLIC_URL}/`} className="logo">
<img
src={`${process.env.PUBLIC_URL}/assets/images/logo.png`}
alt="Molla Logo"
width="105"
height="25"
/>
</Link>
</div>
<div className="col col-lg-9 col-xl-9 col-xxl-10 header-middle-right">
<div className="row">
<div className="col-lg-8 col-xxl-4-5col d-none d-lg-block">
<div className="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">
<Link to="#" className="search-toggle" role="button">
<i className="icon-search"></i>
</Link>
<form method="get" onSubmit={formSubmitHandler}>
<div className="header-search-wrapper search-wrapper-wide">
<div className="select-custom">
<select id="cat" name="cat">
<option value="">All Departments</option>
<option value="1">Fashion</option>
<option value="2">- Women</option>
<option value="3">- Men</option>
<option value="4">- Jewellery</option>
<option value="5">- Kids Fashion</option>
<option value="6">Electronics</option>
<option value="7">- Smart TVs</option>
<option value="8">- Cameras</option>
<option value="9">- Games</option>
<option value="10">Home & Garden</option>
<option value="11">Motors</option>
<option value="12">- Cars and Trucks</option>
<option value="15">- Boats</option>
<option value="16">
- Auto Tools & Supplies
</option>
</select>
</div>
<label htmlFor="q" className="sr-only">
Search
</label>
<input
onChange={inputChangeHandler}
type="search"
className="form-control"
name="q"
id="q"
placeholder="Search product ..."
value={search}
required
/>
<button className="btn btn-primary" type="submit">
<i className="icon-search"></i>
</button>
<input
style={{display:"none"}}
type="file"
name="file"
onChange={onChangeHandler}
ref={imageInput}
/>
<div className="btn btn-outline-primary" onClick={somethingtohappen}>
<i className="fa fa-camera"></i>
</div>
</div>
</form>
</div>
</div>
<div className="col-lg-4 col-xxl-5col d-flex justify-content-end align-items-center">
<div className="header-dropdown-link">
{/* <CompareMenu /> */}
<Link
to={`${process.env.PUBLIC_URL}/shop/wishlist`}
className="wishlist-link"
>
<i className="icon-heart-o"></i>
<span className="wishlist-count">
{props.wishlist.length}
</span>
<span className="wishlist-txt">Wishlist</span>
</Link>
<CartMenu />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I move the red - button to be up next to the top of the control?
The HTML looks like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<select size="10" class="form-control" id="assigned-tenants" name="assignedTenants">
<option value="1">fdsaf</option>
</select>
<button ata-toggle="tooltip" title="Add" class="btn btn-danger">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
You will have to use the bootstrap class pull-left to your first element in that column which is select box.
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<div class="col-md-10 pull-left" style="padding-right:0px">
<select size="10" class="form-control" id="assigned-tenants" name="assignedTenants" class="pull-left">
<option value="1">fdsaf</option>
</select>
</div>
<div class="col-md-2 pull-left" style="padding-left:0px">
<button ata-toggle="tooltip" title="Add" class="btn btn-danger pull-left">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
Use vertical-align:top; in the css for that button.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<select size="10" id="assigned-tenants" name="assignedTenants">
<option value="1">fdsaf</option>
</select>
<button ata-toggle="tooltip" title="Add" class="btn btn-danger" style="vertical-align:top;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
I want all tooltips to show at the same position. The one with the input group is slightly out of align. Also the tooltip does not appear for select (selectpicker). Please help. Thanks.
Link: http://www.bootply.com/pb5yAV7aIS
$(function() {
$('[data-toggle="tooltip"]').tooltip();
$('.selectpicker').selectpicker();
});
.mb5 { margin-bottom: 5px; }
.tooltip-inner { max-width: 500px; white-space: nowrap; }
.red-tooltip + .tooltip > .tooltip-inner { background-color: #f00; }
.red-tooltip + .tooltip > .tooltip-arrow { border-right-color: #f00; }
<div class="container">
<div class="form-horizontal">
<div class="col-sm-3">
<div class="form-group mb5">
<input type="text" class="form-control input-sm" data-toggle="tooltip" data-placement="right" title="This is input">
</div>
<div class="form-group mb5">
<input type="text" class="form-control input-sm red-tooltip" data-toggle="tooltip" data-placement="right" title="This is another input">
</div>
<div class="form-group mb5">
<div class="input-group input-group-sm">
<input type="text" class="form-control input red-tooltip" data-toggle="tooltip" data-placement="right" title="This is input with group">
<span class="input-group-btn">
<button class="btn btn-success" type="button" tabindex="-1"><i class="fa fa-refresh"></i></button>
</span>
</div>
</div>
<div class="form-group mb5">
<select class="selectpicker show-tick" title="Please choose one" data-width="100%" data-toggle="tooltip" data-placement="right">
<option selected="" value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
</div>
<div class="col-sm-9">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
please check this link i edit your code
link:-http://www.bootply.com/u77OpcF2Ua
<div class="form-group mb5" data-toggle="tooltip" data-placement="right" title="This is another input">
<select class="selectpicker show-tick" title="Please choose one" data-width="100%">
<option selected="" value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
something like this, you need move the tooltip to parent container:
1.fixed input with btn group.
2.fixed select by move red-tooltip up to parents, and move title="Please choose one" data-toggle="tooltip" data-placement="right" up (always keep in mind about element block).
<div class="form-group mb5 red-tooltip" title="Please choose one" data-toggle="tooltip" data-placement="right">
<select class="selectpicker show-tick" data-width="100%">
<option selected="" value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
1. check this link:
http://www.bootply.com/EhSNBH1elh
2. same code here, incase 1st link broken:
http://www.codeply.com/go/bp/eCXWCy93sh
3. style not looking right at stackoverflow but you got the idea (in case 1st and 2nd link all broken).
$(function() {
$('[data-toggle="tooltip"]').tooltip();
$('.selectpicker').selectpicker();
});
.mb5 { margin-bottom: 5px; }
.tooltip-inner { max-width: 500px; white-space: nowrap; }
.red-tooltip + .tooltip > .tooltip-inner { background-color: #f00; }
.red-tooltip + .tooltip > .tooltip-arrow { border-right-color: #f00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/i18n/defaults-*.min.js"></script>
<div class="container">
<div class="form-horizontal">
<div class="col-sm-3">
<div class="form-group mb5">
<input type="text" class="form-control input-sm" data-toggle="tooltip" data-placement="right" title="This is input">
</div>
<div class="form-group mb5">
<input type="text" class="form-control input-sm red-tooltip" data-toggle="tooltip" data-placement="right" title="This is another input">
</div>
<div class="form-group mb5">
<div class="input-group input-group-sm red-tooltip" data-toggle="tooltip" data-placement="right" title="This is input with group">
<input type="text" class="form-control input">
<span class="input-group-btn">
<button class="btn btn-success" type="button" tabindex="-1"><i class="fa fa-refresh"></i></button>
</span>
</div>
</div>
<div class="form-group mb5 red-tooltip" title="Please choose one" data-toggle="tooltip" data-placement="right">
<select class="selectpicker show-tick" data-width="100%">
<option selected="" value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
</div>
<div class="col-sm-9">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
I have the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container text-center">
<div class="form-group input-group">
<span class="input-group-btn form-group">
<select name="huge" class="selectpicker" data-style="btn-default btn-fill btn-block">
<option disabled> Search in...</option>
<option value="1" selected>Songs </option>
<option value="1">Bands</option>
<option value="1">Drummers</option>
<option value="1">Time Signatures</option>
</select>
</span>
<input type="text" class="form-control form-group">
<span class="input-group-btn form-group">
<button class="btn btn-info btn-fill search-button" type="button">Search</button>
</span>
</div>
</div>
I would like the different elements to stack on top of eachothers when going on mobile view. Right now, the search bar shrinks and become invisible on low resolution.
How can I do so that the 3 elements stack on top of eachothers when in mobile view?
PS: I'm using bootstrap-select for the select element.
I think you have to drop the form-group structure and use a row instead:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.input-block-level {
display: inline-block;
width: 100%;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row nopadding">
<div class="nopadding col-xs-12 col-sm-4">
<select name="huge" class="form-control input-block-level" data-style="btn-default btn-fill btn-block">
<option disabled>Search in...</option>
<option value="1" selected>Songs</option>
<option value="1">Bands</option>
<option value="1">Drummers</option>
<option value="1">Time Signatures</option>
</select>
</div>
<div class="nopadding col-xs-12 col-sm-4">
<input type="text" class="form-control input-block-level">
</div>
<div class="nopadding col-xs-12 col-sm-4">
<button class="btn btn-info btn-fill search-button input-block-level" type="button">Search</button>
</div>
</div>
How can I get multiple inputs on a single line in a jumbotron with Bootstrap 3.
So it looks something like this: Find [dropdown list] in [text input] [Submit Button]
This is what I've currently got: http://jsfiddle.net/cTLwW/ but I goes over 4 lines and each for input item is way to wide.
<div class="container jumbotron">
<h1><span class="text-center">Mywebsite.</span></h1>
<h2><span class="text-center">Find things close to you</span></h2>
<form class="form-horizontal" role="form" action="/" method="post">
<div class="form-group">
<span class="text-center"><label for="inputCity" class="col-lg-2 control-label">I
need</label></span>
<div class="col-lg-10">
<span class="text-center"><select class="form-control">
<option>
Bakery
</option>
<option>
Supermarket
</option>
<option>
Etc
</option>
</select></span>
</div>
</div>
<div class="row form-group">
<span class="text-center"><label for="inputType" class=
"col-lg-2 control-label">In</label></span>
<div class="col-lg-8">
<span class="text-center"><input type="text" class="form-control" id=
"inputCity" placeholder="City"> <button type="submit" class=
"btn btn-success"><span class="text-center">Go</span></button></span>
</div>
</div>
</form>
Try like this,
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
label {
font-weight: normal;
}
.jumbotron {
line-height: 1.143;
}
label.col-lg-1 {
width: 0;
}
</style>
</head>
<body>
<div class="container jumbotron">
<h1><span class="text-center">Mywebsite.</span></h1>
<h2><span class="text-center">Find things close to you</span></h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputCity" class="col-lg-2 control-label">Ineed</label>
<div class="col-lg-3">
<select class="form-control">
<option>
Bakery
</option>
<option>
Supermarket
</option>
<option>
Etc
</option>
</select>
</div>
<label for="inputType" class="col-lg-1 control-label">In</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputCity" placeholder="City">
</div>
<button type="submit" class="btn btn-success">Go</button>
</div>
</form>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Screen-shot
Try this
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container jumbotron">
<h1><span class="text-center">Mywebsite.</span></h1>
<h2><span class="text-center">Find things close to you</span></h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputCity" class="col-lg-2 control-label">Ineed</label>
<div class="col-lg-3">
<select class="form-control">
<option>Bakery</option>
</select>
</div>
<label for="inputType" class="col-lg-1 control-label">In</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputCity" placeholder="City">
</div>
<button type="submit" class="btn btn-success">Go</button>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>