I would like to center some content in a row using the Bootstrap grid system. I have looked at many examples about this including this, but my example differs because of the use of a separate angular component to generate the content.
app.component.html:
<div class="row" style="border:1px solid red;">
<div class="col d-flex justify-content-center">
<button mat-raised-button>text</button>
<app-child-component></app-child-component>
</div>
</div>
child-component.html:
<div *ngFor="let text of buttonText">
<button mat-raised-button>{{text}}</button>
</div>
child-component.ts:
buttonText = ['Button1', 'Button2', 'Button3'];
This gives the result:
But I would like all buttons to be horizonally aligned:
StackBlitz example:
https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src%2Fapp%2Fchild-component%2Fchild-component.component.ts
Just add display: flex to the wrapper container:
Better to add class instead of inline style. Inlining was done for demo only
<div style="display:flex">
<div *ngFor="let text of buttonText">
<button mat-raised-button>{{text}}</button>
</div>
</div>
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
I'm trying to create two panels in bootstrap with centralized text and different fonts in the text. Like the image below
My code:
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
However, my output is:
How can I have the "shadow" outside the panels and the text inside in similar font to the image above?
Thanks you
I also used to face this problem. So, here is the workaround.
Add the top-level child divs and give them padding (like p-1). This is their only job.
Within each top-level div, add your cell's main content, and style them however you want.
This is the code
<div class="parent row">
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
Normally I reset padding and margins for .row and .col classes
<style>
.row, .col-lg-6 {
padding: 0;
margin:0;
}
.child {
background-color: white;
}
.parent {
background-color: #F3F4F5;
}
</style>
The result is like this
NOTE: I've used bg-dark and bg-light classes for showing the background colors of parent and child divs. You can give them whichever color you want.
Check out this, used .panel-body wrapper
https://jsfiddle.net/420gwtLz/7/
I will suggest using the latest version of Bootstrap, you will get utility classes for shadow and spacing.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 4 years ago.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-outline-primary">Gallary</button>
</div>
</div>
</div>
I'm new to html and bootstrap. I'm trying to place a button in the center of the webpage vertically and horizontally. I have created a container and added a row inside it. Inside the row I offsetted a 4 column div element. Inside the div element is the button. But this button does'nt seem to be in the center. If I add a second button and tried offsetting it, it would be placed in the center but the hover wont work(or button does'nt work).
In Bootstrap 4 you should use the text-center class to align inline-blocks.
NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
</div>
</div>
There is a class 'text-center' already with the property of text-align: center in bootstrap. You should use that in the parent element in order to center align child elements.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<button class="btn btn-default">Gallery</button>
</div>
</div>
</div>
As described in the official Bootstrap Docs, you can just add the class name text-center to a parent class list to horizontally center it's children text elements using text-align: center.
Check and run the following Code Snippet for a practical example of using the text-center class name:
/* CSS */
a {text-decoration: none;}
<!-- HTML -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<button type="button" class="btn btn-outline-primary">Gallary</button>
</div>
</div>
</div>
This is my current code
.tag-container.bottom-border.col-middle
h1.text-center {{ tag.name }}
button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow
I want to make the tag.name in the middle, and the button in the right, but it didn't display correctly. How should I structure these two part? What css should I use?
Thanks.
Update
This is the simplified code about basic html
<row>
<div>
<h1> Tag name</h1>
</div>
<div class="pull-right">
<button>Follow</button>
</div>
</row>
Feel free to work on it. Thanks
If you want to stick to pure bootstrap styles, something like this would work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Tag name</h1>
</div>
<div class="col-md-1 text-center">
<button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
</div>
</div>
You'll need some extra styling to vertically center the button (to replace the inline style adding 1.5em margin to the top).
Also that styling centers the button below the h1 in mobile breakpoints ... that may or may not be what you're after.
I have two rows in contianer.
Now i am trying to interchange one grid element with the other in mobile layout.
But i am not able to get how to interchange for only specfic case as both are in two different rows classes.
For the Desktop app
For the Mobile Layout currently it is showing as
Actually i want the layout to realign only 3rd grid to come above as shown in picture below.
For the refernce i am attaching jsfiddle of the same. LINK
HTML Code :
<div class="container">
<div class="container">
<div id="graphArea" class=" row" >
<div class="col-lg-4 col-md-4">
<span class="label label-warning"><span class="badge">1:</span> First </span>
</div>
<div id="rightgrid" class="col-lg-6 col-md-6">
<span class="label label-warning"><span class="badge">2:</span> Second </span>
</div>
<div id="extright" class="col-lg-1 col-md-1">
<span class="label label-warning"><span class="badge">4:</span> Fourth </span>
</div>
</div>
<div class="row borderbottom">
<div id="inputDiv" class="col-md-6">
<span class="label label-warning"><span class="badge">3:</span> Thrid</span>
</div>
<div>
CSS Code:
.borderbottom
{
border: 2px solid #999;
margin-top:5px;
margin-bottom: 5px;
}
Please let me know the current problem work around or guide me with ways i can do it.Thanks
you can copy the sections and add visible and hidden classes to them
like in this fiddle
.hidden-xs, .visible-xs-inline-block
for better usage, you can use nginclude (if you use angularjs) to avoid duplicate html and specify bootstrap grid-float-breakpoint (if you use boostrap sass) for better visible/hidden handling.