I'm using Bootstrap 3 to design my website and I would like to fit a text input and 3 buttons horizontally in a div. Here is my markup:
<div style="width: 400px">
<input class="form-control" type="text">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</div>
But the text input spans to the whole div's width and the buttons get pushed underneath it.
I've tried setting the text input's display mode to inline and inline-block but it didn't change anything.
Try this DEMO
<div class="form-inline">
<div class="form-group">
<input class="form-control" type="text">
</div>
<a class="btn btn-default" href="#">Button 1</a>
<a class="btn btn-default" href="#">Button 2</a>
<a class="btn btn-default" href="#">Button 3</a>
</div>
Nowadays the correct solution is to use the flex classes: https://getbootstrap.com/docs/4.0/utilities/flex/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row bg-info">
<div class="p-2 bg-warning">Flex item 1</div>
<div class="p-2 bg-danger">Flex item 2</div>
<div class="p-2 bg-secondary">Flex item 3</div>
</div>
I noticed that the class="form-control" is responsible for the input spanning the whole width. Also you should remove the width='400px' style and use a bootstrap class or just make it bigger to contain the four elements.
See this Fiddle
Since you are using Bootstrap 3 you should try this:
<div style="width: 600px">
<div class="row">
<input class="col-md-3" type="text">
Button 1
Button 2
Button 3
</div>
</div>
See the official bootstrap 3 docs
Put it inside a form tag like this
<form class="form-inline" role="form">
<div style="width: 500px">
<input class="form-control" type="text">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</div>
</form>
Also add more width or make the button/text smaller so all 3 can fit
Your given code works according to your description. All the three button and text field are in the same line. May be you did not link the bootstrap library properly. Here is the code with bootstrap link
<head>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div style="width: 400px">
<input type="text" class="form-control" />
Button 1
Button 2
Button 3
</div>
</body>
Related
I'm creating a query form using bootstrap's 12 column grid system (version 3). The layout consists of dropdown menu where a user can select an item.
The Problem:
When a user selects a value from the dropdown menu, the element overflows into the next column. Is there a recommended solution for correcting this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-4">
<input type="text" />
</div>
<div class="col-md-3">
<div class="btn-group" uib-dropdown>
<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="">
{{importTGModal.paramCondition1_selected}}
<span class="caret">
</span>
</button>
<ul class="dropdown-menu" ng-click="importTGModal.setParamCondition1($event)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem" ng-repeat="condition in importTGModal.paramConditions1">
<a data-value={{condition}}>{{condition}}
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<input type="text" />
</div>
</div>
That's because the dropdown is larger than the container column.
Try one of the following:
1- (Recommended) Put the dropdown and the input text in same column
2- Make the column of the dropdown bigger. Like col-md-6
3- (Not Recommended) Bootstrap class .btn adds white-space: nowrap;. Set it to white-spsace: normal for this button, so if the button has long text (bigger than the column) the text will break to next line. Like so:
<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="" style="white-space: normal;">
I am attempting to center the search bar in my navbar. I am using bootstrap, I tried text-center on the md-4 but it had no effect.
Here is a link to my code.
http://bootsnipp.com/snippets/50b38
Bootstrap uses a grid of 12 columns. Your code had the first column be 8 and the 2nd one be 4. This would mean that your first column would be 2/3 of the page. By making it col-md-4, it allows your middle div to be center.
<div class="row top-header">
<div class="container">
<div class="col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="col-md-4">
<div id="search-center">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Here is an updated source:
http://bootsnipp.com/user/snippets/E7WgX
over your code in css tag, i put that and seems ork
.top-header {
background-color: #D9D9D9;
text-align:center;
}
Expect it help you
I am trying to align 7 items in a grid layout so that each element is fixed in it's place currently I am able to achieve like below screenshot. Here is the plunker for the same code (but some how it does not look good on plunker).
The problem in my current state is minutes is wrapped to 2nd line. Also how can I utilise extra space from Agent: label area and Reset button area so that the space gets utilised?
Code
<div class="row">
<div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
<div ng-show="!loadinga">
<b>Agent: </b>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-right: 0px; padding-left:0px;">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text" ng-blur="" />
</div>
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
</div>
<div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
Update
Or is there a way to keep Agent: label and drop down in same line without giving separate div with col-md-1 class to label?
Need something like below screenshot
Right so my attempts at solving this are below, I'm not going to give you the same body of text because you can review that in the previous post.
Here is the completed grid with all the parts you have requested, it's also laid out better. (Its not really device friendly as requested).
I updated the example to work correctly
Code:
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#1.x" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-2 sidebar">
<div class="sidebar-nav" style="height:100% !important;min-height: 100% !important">
<div class="navbar navbar-custom" role="navigation">
<ul class="nav recommendation-nav">
<li class="active">
<img style="padding-right: 5px" /> Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar 1
</li>
<li >
<img style="padding-right: 5px" />Side bar 2
</li>
<li >
<img style="padding-right: 5px"/>Side bar 3
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-sm-offset-1 report-area">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-2">
<div class="dropdown" ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text"
ng-blur="" />
</div>
</div>
<div class="col-xs-12 col-sm-4 divGridText" ng-show="!loadinga">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-xs-12 col-sm-1 divGridText" style="width:9.33%" ng-show="!loadinga" >
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Task Labels</label>
</div>
<div class="col-xs-1 col-sm-1 divGridImage" ng-show="!loadinga">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Preview:
Your parent divs (the columns) should be set to 0 padding and 0 margin, and the childs should have whatever padding/margin you want. This prevents an overflow.
For example, if you have 4 columns (which equal to 25% width each) and even one of them has a left or right padding of like 10px, then the 4th column will be pushed to the next line because they are now exceeding the 100% width.
Bad example:
HTML:
<div class="col-1">
//content
</div>
<div class="col-2">
//content
</div>
CSS:
.col-1, .col-2 { width: 50%; display: inline-block; padding-left: 15px }
The above code will have the second column flow to the next line because of that padding-left of 15px, which you also use in your own code.
Good example:
HTML:
<div class="col-1">
<div class="inner-col-1">
//content
</div>
</div>
<div class="col-2">
<div class="inner-col-2">
//content
</div>
</div>
CSS:
.col-1, .col-2 { width: 50%; display: inline-block }
.inner-col-1, .inner-col-2 { padding: 0 15px }
The above code will ensure that your columns are on the same line, and the inner content can now use whatever padding/margins you want because they won't affect the width of the parents.
If you don't need to use the application on another screen size, you could try to align Agent: to the right of his container and the reset button to the left of the container. You could the set negative margins to the row, that would give you more place for your content.
Otherwise, bootstrap gives you the possibility to subdivise each column into 12 new columns, you could try something like this :
<div class="row">
<div class="col-md-6">
<!-- you can put here the 4 first elements as you like, on a 12 columns layout -->
</div>
<div class="col-md-6">
<!-- you have again a 12 columns layout for the 3 lasts elements -->
</div>
</div>
look at http://getbootstrap.com/examples/grid/ in the section "Two columns with two nested columns" for a visual example
Easy but no very attractive solution
<span>minutes</span>
PS: I am not sure I have fully understood your question
On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.
How can i make the dropdown the size to fit the content (in my case it happens when shrinking the browser to less than some certain size, then content start to dissapear? I preferably do not want any custom css, anything built in to bootstrap to support this?
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>
Option 1: You can add width:auto to the select, although then it will always size to fit the longest content, and ignore your col class. See the snippet:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control" style="width:auto;">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>
Option 2 would be to use an inline form, see this bootply for a functioning example
Old question, new answer. You can set the class to w-auto in bootstrap 4.
New answer
Bootstrap v5
You can put your select element in a container :
<div class="container w-25">
<select class="form-select h-100 w-100" aria-label="">
<option>Images</option>
</select>
</div>
You might consider using bootstrap's dropdown widget which will allow wrapping http://jsfiddle.net/g4s59a9a/:
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#">
Much much much longer text not fitting when resizing
</a>
</li>
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#">
Smaller text
</a>
</li>
</ul>
</div>