I am using Twitter Bootstrap 3. I need to populate a "row" with a search bar and two buttons. My problem is the row do not stretch to the entire width of the page.
Here is what it looks like:
<div class="container-fluid">
<div class = "row">
<div class = "col-md-8">
<form>
<input type="text" id="searchbar" class="form-control" placeholder="Search XXX">
</form>
</div>
<div class="col-md-4" >
<button type="button" class="btn btn-primary">Create AAA</button>
<button type="button" class="btn btn-primary">Create BBB</button>
</div>
</div>
Even if I make the cols as 9 and 3, the buttons stack up in the next row. I tried btn-group, same result. I want create AAA and Create BBB buttons to float to the right. Is there any css class I could use from Bootstrap 3 or should I write customized css?
Bootstrap's grid system uses percentages to denote the size as X/12, where X = the number provided (so if you use col-md-4, it will be 4/12 = 33%, or width: 33.33333333%). This results in the buttons/text field will not auto-expanding to fill the rest of the space, as the intended operation is to not stretch.
If changing the columns to 9 and 3 causes the buttons to drop to the next row, you can keep the columns as 8 and 4, and add the following style to the div containing the buttons (whether you make it an inline style [not recommended] or create your own css class is up to you):
text-align: right;
This will move the buttons to the right, as float: right did not work. The search bar and buttons will move with the browser size, however the gap between the search bar and the buttons will still be around since we have moved the buttons to the right-hand side.
Bootply: http://www.bootply.com/YDmOVoWvN3
Related
Seriously, How do you make TailwindCSS button group span the full witdh ?
For simple buttons, you could use btn-block, but that wont work once you start using button groups.
Okay as, i was righting this I found the answer, but still went ahead to publish this, cause I didnt find answers else where....
So I ended up using tailwind witdh classes documented here
<div class="btn-group">
<button class="btn w-1/2 btn-outline btn-primary ">Save</button>
<button class="btn w-1/2 btn-outline ">Cancel</button>
</div>
so the class w-1/2 gives a 50% width, i'm using this caus I have only 2 buttons in my button group, so you should adjust accordingly depending on the number of buttons.
The draw back with this technique, is that it can become complex if you want to add buttons dynamically. put still doable.
I am working on a Bootstrap based form and struggling to get things to position properly.
I am trying to create a form consisting of labels/prompts and textboxes. The problems that I have with my code are
the label column (col-3) is too wide and reducing it to col-2 is too narrow. But I would like to make it narrower than what it is now.
the textboxes in the textbox column (col-4) are the same length but it does not matter what their class is, they don't get any wider. I would like them all wider.
not sure if I need col-5
I want the controls vertically middle within the row. They look like they are aligned to the top.
I have tried different classes and controls and cannot get something to work. This code will be put in a ASP.Net MVC project which is what the #Html.TextBoxFor is for, but I don't think this is an issue.
<div class="container">
<div class="row" style="height:38px">
<div class="col-3">Label 1:</div>
<div class="col-4">#Html.TextBoxFor(m => m.Textbox1)</div>
<div class="col-5"></div>
</div>
<div class="row" style="height:38px">
<div class="col-3">Label 2:</div>
<div class="col-4">#Html.TextBoxFor(m => m.Textbox2)</div>
<div class="col-5"></div>
</div>
</div>
Bootstrap 4 actually has column management here: https://getbootstrap.com/docs/4.3/layout/grid/
Specifically, col-sm-,col-md-,col-lg tags should assist you in choosing one thats the proper size
I'm new in Angular and Bootsrap 4, and I'm having trouble setting up the layout for a dashboard I'm currently working on. I have a series of cards that need to be arranged in a particular way, as follows:
I have a row, in which I have put a col-12 div, and inside I have placed all the cards (1,2 and 3 are static content, the others are loaded with a ngFor, from a list that comes from the database).
The problem with this is that since card 1's has double height relative to all the others, cols for 2 and 3 are the same height as the col for card one. The result is as follows:
Is there a way to fix this using my approach, say, having the extra empty space in the colums for the cards 2 and 3 taken away, and place the other cards in there? Or should I use a completely different approach?
edit: Here's the code I've used.
<div class="col-lg-12">
<div class="row">
<div class="double-card-col">
<app-tool-card-double-1></app-tool-card-double-1>
</div>
<div class="cards">
<tool-card-2></tool-card-2>
<tool-card-3></tool-card-3>
</div>
<ng-container *ngFor="let tool of tools; trackBy: trackBy">
<tool-card></tool-card>
</ng-container>
</div>
I have an Angular Material page with a few input containers.
Some of these containers are aligned side by side with a space distribution of 33 % and 66 %. I want only one label above these input fields.
<div layout="row">
<md-input-container flex="33">
<label>My Label</label>
<input type="text" ng-readonly="true" ng-model="text1"/>
</md-input-container>
<md-input-container flex="66">
<label></label>
<input type="text" ng-readonly="true" ng-model="text2"/>
</md-input-container>
</div>
I placed my label above the first input container and over the second container an empty label.
And this is exactly where my problem is located, because on smaller screens the label gets truncated. This is completely comprehensible, but in my case I don't want this behavior of Angular Material. How do I achiev this? Here is a demonstration of my problem. On a smaller screen the label gets cut of.
tl;dr
I want two input containers with only one label. The label should be visible all the time, also on small screens, but it gets truncated.
Thanks for any help.
It was too simple!
All I had to do was preventing the overflow: hidden; attribute, which is set by default from angular material.
The default truncation looked like this:
After changing the style sheet to overflow: visible !important; the result is exactly what i wanted:
I made an update on the plunker example given above. Here is the new version.
Like this one http://vadikom.github.io/smartmenus/src/demo/ but vertical and Bootstrap-style? I am not so good in css to remake it to Bootstrap style (too much css code).
Thanks
Just add data-hover="dropdown" where you'd put data-toggle="collapse".
Update: Sorry I did not understand when you said vertical but now I think I do. So the below will give you a horizontal collapse but you can use that as part of your vertical menu.
You would need to create two tables. One table holds all your buttons/links and the other collapses and un-collapses the panel. For example if you have 10 buttons on the left hand table (10 rows , 1 col). You would have 10 collapsible panels in the right hand-side table which would give the impression of a vertical menu. At least that's how I would attempt it :)
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>