I have a link that looks like a button that needs to be at the center of the page horizontally.
This is the link:
Return to Top
I have tried:
style = "margin: 0 auto"
style = "text-align: center"
class="btn btn-info btn-xs center-block"
Nothing works. Is it because my ui-view is set like so this?
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
What should I do?
You can just wrap your button inside a div and add the text-center class to the div as follows:
<div class="text-center">
Return to Top
</div>
axc, Hi there. Along the line of what Imgonzalves has said.
You need to give some width to center something within.
Have a look at this Fiddle.
The top block you will see the button is centered.
Using the Bootstrap class text-center which is placed in the parent and then it will center all text within that div and ones within.
The parent has width because it uses the class col-md-10.
The second orange block in this demo shows you what you were trying to do.
Hope this shows you that you need to give a div some width to center the button within.
Related
I have my HTML and it looks as below:
<div class="col-4 icnContainer">
<clr-dropdown>
<button clrDropdownTrigger aria-label="Dropdown demo button">
<clr-icon shape="ellipsis-vertical"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
<div aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</div>
<div aria-label="Dropdown header Action 2" clrDropdownItem>Action 2</div>
<div clrDropdownItem>Link 1</div>
<div clrDropdownItem>Link 2</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
My output that I get with this kind of setup is shown in the image below:
'
As you can see in the circle, there is an caret added after the Ellipsis. I dont want the caret, I just want the ellipsis like below:
Can anyone tell me how I can achieve that.
Furthermore, the dropdown is opening inside the containing div as shown below
How can I get the menu to open outside the containing div.
For positioning the menu you can use one of the following positions:
top-right
top-left
bottom-right
bottom-left
right-top
right-bottom
left-top
left-bottom
Here is a demo with the bottom-right position: https://stackblitz.com/edit/so-58030404-dropdown-menu-positioning
I'm not sure where the carot icon is coming from, can you fork and modify the stackblitz to create a reproduction that I can look at?
Is there a possibility to give a bootstrap 4 col the width of its child, which is a container class?
<div class="container-fluid">
<div class="row">
<div class="col bg-secondary m-0 p-0">
text left
</div>
<div class="col-auto bg-primary">
<div class="container bg-primary m-0 p-0">
text mid
</div>
</div>
<div class="col bg-secondary m-0 p-0">
text right
</div>
</div>
</div>
I basically want to be able to put content on the left and right of a container, but I don't want my container to change in size because of this, because this left and right content won't be present on every page, and I want a consistent container width cross pages.
https://jsfiddle.net/5gt9uoqb/
Update:
Here's an image of what I would like to achieve: ibb.co/tcKM6S0 . At the bottom is a 'normal' page, with a centered container. This is a div with the standard container class that ships with bootstrap. At the top is a new page type I would like to create. It should have the exact same container like the other page, but I want to be able to put content in the grey zones, like, for example, some social icons (blue in the img). Wrapping the normal pages in a column too is not an option in my set up because of other stuff.
if you know about position property, then you can handle this issue without touching the container class.
For that, you need to a parent class of all child element. I mean after the body tag you take a class and give it position relative the which content you want to be left give it position absolute and left:0px;(you can space from left according to your), and if you want content right then you give it right:0px;
I have this simple user profile -https://jsfiddle.net/mt15199/fgogetrh/
I want to pull the envelope icon on the left, so I put it on span element and added a class pull-left but icons dropped and overlapped the container. Without this span element with pull left class the envelope icon and other icon sitting inside of div.
How can I fix this?
<span class="pull-left">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</span>
Whenever you are using float don't forget to use clear or else element will overlap.
See demo
Use clearfix class or clear:both; after floated element
use
<div class="clearfix"></div>
or
<div style="clear:both;"></div>
First example is from bootstrap having same style given in second one.
I have the following ion-view :
<ion-view view-title="Success" ng-controller="successController" class="success-view">
<ion-content>
<div class="row row-center">
<div class="col">
<h1>Success!</h1>
<h3>Your login credentials will be SMSed to you shortly</h3>
<button class="button button-block button-positive" ui-sref="login">
Okay
</button>
</div>
</div>
</ion-content>
</ion-view>
I'm trying to vertically align that col in there in the screen. Now I understand that the only way this is going to work is if my row takes up 100% of the height. Yet if I go ahead and add style="height: 100%;" to my row it doesn't work, the row's height still wraps to it's contents. Even if I add !important it still doesn't span the full height of the screen... Any ideas?
Seems like Ionic framework adds a dynamic class scroll wrapping the row. Add a height: 100% to the parent scroll as well.
.row, .scroll {
height: 100%;
}
Output:
Ionic Demo
I am using angularjsJS to create a list with the ng-repeat directive. This list contains 3 divs inside itself, which are layed out using floats. The idea is to change the background color of the entire div whenever the user moves the mouse inside the div's area. Below is the code I am using:
HTML
<div class="concert-item" ng-repeat="(key, concert) in value">
<div class="selfie item-float-left">
<img alt src="[[[concert.author.selfie]]]" class="img-circle"/>
</div>
<div class="item-float-left">
<p class="event-header">[[[concert.author.displayName]]]</p>
<p>[[[concert.venue]]]</p>
<p>[[[concert.dateInMs | timeFilterShort]]] # [[[concert.beginTimeShort]]]</p>
</div>
<div class="item-float-right">
<a href="https://maps.google.com/?q=[[[concert.street]]],[[[concert.zipCode]]]&output=classic" target="_blank">
<img alt src="{{static '/img/MapIcon#50px.png'}}"/>
</a>
</div>
<div class="clear"></div>
</div>
CSS (less)
.concert-item :hover{
background-color: #light-gray-font-color;
}
With this code, when the user hovers over any of the div's children, only the background of that child element is modified. The rest of the div's area is not affected by the :hover setting.
I would appreciate is someone can provide any pointers about how to make the whole div's area change its background color when the mouse moves inside any point within the div's area.
You need to apply the :hover to the actual parent div. If you lose the space in your LESS so it looks like this:
.concert-item:hover{
background-color: #light-gray-font-color;
}
It should work the way you want.