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
Related
I am trying to make something like this in React. I have a dynamic array of locations and want to make it responsive. If the number of locations can't fit in one row then display show more with the number of remaining locations. If I change browser width it should display a responsive array.
<section class="thumbnails">
<span>Home</span>
<span>Blog</span>
<span>News</span>
<span>Portfolio</span>
<span>Team</span>
<span>Mission</span>
<span>Location</span>
<span>Forum</span>
<div class="thumbnails__count">
<p class="thumbnails__count-text">
+<span class="thumbnails__count-value"></span> more items
</p>
</div>
</section>
Thank you
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'm a super, super noob and need your help.
What I'm trying to achieve is layout kinda flexible in a column but still in rows, like on a picture below, there are 3 rows, each in a different color. I tried 3 rows as well as 1 row, doesn't make a difference.
Ok, so I got 9 columns, each one takes 4 spaces. And I tried to move the middle picture in a green row to the middle column of the pink one. Didn't work out, I mean it did but the other pictures got messed up. I also tried the .clearfix.
Hope you can help guys, cheers!
What you are trying to achieve is called a Masonry Layout.
You cannot distribute your layout by rows, you have to do it using columns.
Everything should be inside a .row div, and have the number of columns you need (in your image case, you need to use .col-md-4).
Then you should add everything to those three columns dynamically, using Javascript or the technology you are using (you can achieve it also on PHP or so on, I'll edit if you need help on that).
Also, I recommend you using Bootstrap 4, as it contains a new feature called Cards Columns which is designed for what you are trying to achieve:
https://v4-alpha.getbootstrap.com/components/card/#card-columns
Bootrstap has different classes to achieve this.
Primarily,
<div class="row">
And
<div class="col">
The row class defines the row, and the col class defines the column.
You specify the columns by col-1, col-2, col-3 as an example, all the way up to col-12. If you don't defined the col size, it will automatically fill out as much space as possible, up the size of col-12.
There are tons of nested classes to alter the behavior as well, such as text placement within the elements etc.
This row and column system is also fully responsive.
Read more here.
If you can't achieve the desired result by using bootstrap rows and cols,
try using flexbox instead. More info here.
you can use the nav bar for the upper position but bootstrap doesnt provide classes to break the columns into rows rather it provides to break the rows into columns only.you have to use html css and jquery here.
You won't be able to align top->bottom fashion with bootstrap. The only method I could find which can provide appealing result is the DeSandro's masonry library (https://masonry.desandro.com/) if you are restricted to Bootstrap 3. In case you can use Bootstrap 4 cards (card columns) can provide some features or you can also look at isotope by DeSandro.
But staying with the mentioned masonry plugin:
<div class="container">
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 1
</div>
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 2
</div>
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 3
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
Content 4
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
Content 5
</div>
<!-- ... -->
</div>
and JavaScript:
$(document).ready(function() {
var $container = $('.container');
$container.masonry({
itemSelector: '.my-card',
columnWidth: '.my-card',
transitionDuration: 0
});
});
I am trying to make table or grid view in ionic framework.I am able to make that table but It is not looking same what I am required please check my table view in image .
here is my code .Actually I have also header "Invoice#" and "account Name" they should become background gray .Actually I saw if we take two column in row it take 50% 50% width of window .But when there is 3 column column take 33.33 % width But in my case they are not able to take where I am doing wrong Actually I am generating column dynamically Now it is two but may be later five .I need they will take equal space of total width .is this possible to add "+" in last column ?
here is code
<div class="row">
<div ng-repeat="d in data | filter:{checked: true}">
<div class="col">{{d.label}}</div>
<div class="row" ng-repeat="column in displayData">
<div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
</div>
</div>
</div>
http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview
Here's a working version of your Plunker. To see the columns added and removed, click the gear icon in the header right.
Plunker
To get your grid to layout properly, you can't nest your repeats. That means you have to slightly change your ng-show to observe the checked values on the data model directly.
In it's most basic form, it would look like this:
<div class="row">
<div class="col" ng-repeat="d in data | filter:{checked: true}">{{d.label}}</div>
</div>
<div class="row" ng-repeat="column in displayData | filter: query">
<div class="col" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>
You'll notice that Ionic automatically handles making the grid full width and when properly laid out, it will automatically evenly space your columns. That's because it uses flexbox. That also allows you to tell specific columns how much space they should use. The remaining columns will naturally even distribute to take up the rest of the space. In the demo, I added a column for the gear and the details buttons and gave them col-10 class. This will force these columns to take up 10% of the screen width. For more on how the grid works in Ionic read the docs here.
I also noted that you seemed to have lots of functions where you're trying to do things like manage how the checked values are updated. Stop doing that. That's the beauty of AngularJS and the ng-model directive. If the property doesn't exist on the scope, Angular just creates it for you, and if it does exist, it just updates it. For example, notice how simply I made your search work by setting the ng-model value and passing that to the filter. I didn't have to create a $scope.query because ngModel does that for me. Similarly, I removed all of the functions and references to the 'checked' values from your controller and everything just works because ngModel automatically adds the checked property to the data model.
I use the bootstrap grid layout to render columns dynamically .
Here is the logic that i use
If there are N number of controls columns to be rendered for each row. The col-lg-{} number is decided based on the result (number of controls) /12 .
For example : if there are 6 controls then 12/6 each col attribute will then contain
col-lg-2 ,col-md-2 col-sm-2 etc.
Sample of a bootstrap "row" here .
Now the problem here is if i resize the window the controls in row tend to reduce its width and shrink by its width !!. Instead i want the controls that dont fit in the row to move down below ?
Any suggestion as to how to go about this ? Please Let me know if the question is not clear ?.
it may be the order of the classes in your divs. Try this bootply instead: http://www.bootply.com/j5Qoftk2ny
here's what the html looks like:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">One</div>
<div class="col-lg-2 col-md-4 col-sm-6">Two</div>
<div class="col-lg-2 col-md-4 col-sm-6">Three</div>
<div class="col-lg-2 col-md-4 col-sm-6">Four</div>
<div class="col-lg-2 col-md-4 col-sm-6">Five</div>
<div class="col-lg-2 col-md-4 col-sm-6">Six</div>
</div>
</div>
Each row renders controls (columns) with different number of controls.
So the first row can have 3 controls and the 2nd row could have 6 controls . These controls are set by the user.
So the challenge here was what should the layout be in the above case .
Current implementation decides based on the browser width , which control stays on the row and what falls down .
I render the div column with the display set to inline-block .
style="display:inline-block"
So now based on the browser width and whether a column could fit in the control will be rendered, if not the column control will be displayed below.
This display property is used without bootstrap changes.