I'm trying to center my columns across the page. I'm instead stacking rows on top of each other.
Here is my code:
<tr>
<td colspan="2" style="padding-left: 25px; padding-right: 25px;">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-" style="font-weight:bold;">
Total Open
</div>
</div>
<div class="row">
<div class="col" id="TotalOpen">
1
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
Total Unassigned
</div>
</div>
<div class="row">
<div class="col" id="TotalUnassigned">
2
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
LSA Unassigned
</div>
</div>
<div class="row">
<div class="col" id="LSAUnassigned">
3
</div>
<button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
LS Unassigned
</div>
</div>
<div class="row">
<div class="col" id="LSUnassigned">
4
</div>
<button id="LSUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-lg-12" style="font-weight:bold;">
SLO Unassigned
</div>
</div>
<div class="row">
<div class="col" id="SLOUnassigned">
5
</div>
<button id="SLOUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
ATTY Unassigned
</div>
</div>
<div class="row">
<div class="col" id="ATTYUnassigned">
6
</div>
<button id="ATTYUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
</div>
</div>
</td>
</tr>
Which looks like this:
stacked columns
I'd like it to look like this:
goal
I'm using .cshtml and Bootstrap to try and accomplish this.
I'm not very good at HTML and I don't understand why columns are stacking vertically instead of horizontally.
I apologize for my terrible MS Paint skills.
If you using a bootstrap 4, use a structure row like this.
If you added a more <div> code will got block element.
So let's try like this
<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="row">
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
Total Open
</div>
<div id="TotalOpen">
1
</div>
</div>
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
Total Unassigned
</div>
<div id="TotalUnassigned">
2
</div>
</div>
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
LSA Unassigned
</div>
<div id="LSAUnassigned">
3
</div>
<button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
Related
i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:
You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>
Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>
I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:
HTML:
<div class="container-fluid" style="text-align:center">
<div class="row" style="text-align:center">
<div class="col-md-12" style="font-size:22px">All Blogs </div>
<br><br><br><br>
</div>
<br>
<br>
<div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
<!-- Card Start -->
<div class="card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-3">
<a [routerLink]="['/blog', blog.id]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-5 px-3">
<div class="card-block px-6">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
<br>
<app-blog-category></app-blog-category>
</div>
</div>
Here's a template based on the image. I did an 8 and 4 grid size since bootstrap uses the 12 column system but feel free to alter these numbers as needed.
<div class="container-fluid">
<div class="row">
//this col contains your three card rows
<div class="col-md-8">
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
//this is for your shared component
<div class="col-md-4">
<shared-component></shared-component>
</div>
</div>
</div>
I am trying to make a responsive grid but I was very unsuccessful.
I am new to bootstrap and I am not very good in Front-end.
I tried some codes but this one is the closest one to my needs.
<div><p>MY TEXT HERE -------------------------</p></div>
<div>
<div id="containerTest" class="container-fluid" style="margin-left: 0px;">
<div class="row">
<div class="col-sm-3" style="background-color:red;" >AAAA</div>
<div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
<div class="col-sm-3" style="background-color:lavender;">
<button class="button button2">OK</button></div>
</div>
</div>
With this Bootstrap 4 code, the layout looks like your drawing.
<div class="container">
<div class="row">
<div class="col-12">
<p>My text here</p>
</div>
</div>
<div class="row">
<div class="col-3 col-md-2 pt-2 pr-0">
<label>Input label</label>
</div>
<div class="col-6 col-md-2 pr-0">
<input type="text" class="form-control w-100">
</div>
<div class="col-3 d-md-none">
<button type="button" class="btn btn-success">Save</button>
</div>
<div class="col-12 col-md-3">
<input type="text" class="form-control w-100">
</div>
<div class="col-12 col-md-3 d-none d-md-flex pl-0">
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Other elements here</p>
</div>
</div>
</div>
That should do it.
<div class="container">
<div class="row">
<div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4">Input Label</div>
<div class="col-md-3 col-sm-4">Input</div>
<div class="col-md-3 hidden-sm">Input</div>
<div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
<div class="col-sm-12">
<div class="col-md-3">Input</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Text Area here</div>
</div>
</div>
Quick question on bootstrap and columns/rows. I have a cascade effect that has managers, then employees, then employee family members.
The problem is that I do not have a full understanding of bootstrap and how it uses columns/rows.
I get this result when running my code at the bottom here
But I need this result
I know this is not achieveable with my current code... Any suggestions?
Thanks in advance!
<div class="container">
<div class="row">
#{i++;}
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##i">Manager Name</button>
<div id="#i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
j++;
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##j">Employee Name</button>
<br />
<div id="#j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
<br />
</div>
<br />
</div>
<div class="col-md-2">
<br />
<br />
</div>
</div>
</div>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<br />
Rather than putting rows inside of columns, you'll have to make a bunch of rows on the same level instead. Otherwise the new rows would only be the width of the column it was placed in. Also, container-fluid to make it fully full width if you'd like.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<div id="i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
</div>
</div>
</div>
<div id="j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
</div>
</div>
I am using 3 columns inside a nested row.
instead of stacking horizontally columns are stacking vertically.
this is my code.
i have tried stackoverflow answers but not working.
<div class="jumbotron mainBar">
<div class="container mainBarContainer">
<div class="row">
<div class="col-xs-2">
<div class=" profilePic">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div class="col-xs-4">
<h1>Hello, world!</h1>
</div>
<div class="col-xs-6 container">
<div class="row">
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the fiddle
fiidle
You have a spieling mistake. Change the clas to class which is inside second container.
The demo