I'm trying to remove the "text-decoration" of a hyperlink and change the color in Bootstrap, all i have is this:
<div class="container">
<div class="row">
<div class="col-12 col-lg-3">
Container
</div>
<div class="col-12 col-lg-3">Grid</div>
<div class="col-12 col-lg-3">Columns</div>
<div class="col-12 col-lg-3">Gutter</div>
</div>
Thank you!
I think all you want to do can be found on Bootstrap 5 documentation. All you need to do it just to search on the search bar.
Text decoration: you can add class "text-decoration-none" on tag "a" to remove the underline
while for color, you can refer to https://getbootstrap.com/docs/5.0/helpers/colored-links/
you can see how to use it and find sample there.
Related
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
So I am using angular-cli 8.3.5 and material-angular 8.2.1.
I am trying to center my HTML but not finding any document on helper classes.
Does anyone know how to accomplish the task I am doing?
Documentation: https://material.angular.io/components/categories
To center you can use Angular-Flex-Layout. (Demos: https://tburleson-layouts-demos.firebaseapp.com/#/docs)
import { FlexLayoutModule } from '#angular/flex-layout';
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
<div>CONTET TO CENTER</div>
</div>
The reason why it is not centering it vertically is because your div containing the layout-align attribute does not have a height.
Try something like this :
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="min-height: 500px">
<div flex="15">First line</div>
<div flex="15">Second line</div>
</div>
</div>
I am using material design flexbox layout and in a box, I have two boxes. I create on jsfiddle, to clarify what I mean:
Angular Material app
I want to set between these boxes a space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
For those interested in a solution using Angular Flex Layout, you can achieve this with fxLayoutGap directive.
Without fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
With fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
I think what you need is 'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
I think you can do it much simpler:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
You can insert flexible element between HOME and SIGNUP elements and it will fill the space between them.
Hi please look at this,
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-15">
<div class="row">
<div class="col-lg-**2/3**"></div>
<div class="col-lg-**1/3**"></div>
</div>
</div>
How Can I do it without separator?
I would like to do something like that:
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-5"></div>
</div>
This is Grid - 20 columns, 5 column sidebar 15 rest.
Bootstrap is based on a 12 column grid. If you want a column to be 2/3's of a page with a sidebar 1/3 I would do the following.
<div class="container>
<div class="row">
<div class="col-sm-8">
<p> This content is 2/3 of the page</p>
</div><!-- col-sm-8 -->
<div class="col-sm-4 -->
<p>This content is 1/3 of the page</p>
</div><!-- col-sm-4 -->
</div><!-- row -->
</div><!-- container -->
If you are wanting it to be responsive I would start with defining the smaller screen size "col-sm-?" and large screens will inherit this.
Otherwise, I'm not sure what you are trying to achieve and what you mean by separator. Could you clarify?
Hope this helps.
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding​-right:0;
}​
http://jsfiddle.net/nirmaljpatel/LW5aC/