I'm using navbar whitout lists. How do you make navbar brand stay left, and the links go right? Before it was just "navbar-right", what about now?
Thank you in advance!
I found the answer now.
You have to add "ml-auto".
<div class="navbar-nav ml-auto">
A more complete working example for bootstrap4 alpha 6 here. http://www.codeply.com/go/P0G393rzfm This new behavior occurred in alpha 6 release of bootstrap 4.
I wouldn't say it as a replacement but here is the class you could use to make the menu left-aligned.
<div class = "navbar-nav ms-lg-suto>
.......
.......
.......
</div>
Related
I'm relatively new to HTML so maybe there's been a really blatant solution I've been missing. But I'm making a single-scroll website (with bootstrap) with a very basic navbar for people to jump to the section they want.
The navbar is currently an ul with a background image that appears from the right on hover.
I've followed various tutorials; created the anchor points and id tags, yet nothing seems to happen when I click on the navbar buttons. And I feel like I'm missing a fairly obvious solution here. I've shifted the position of the anchors around, and tried a few variants in both html and css I found online but none seemed to have solved it for me. I've tried it on other browsers, so it isn't a browser issue.
Here's the navbar code:
<div class="container-fluid menuholder">
<div class="menu">
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
</div>
</div>
and here's a relevant part of one of the sections it's supposed to automatically scroll to:
<div class = "container">
<div class="row">
<div class ="chap1title col-md-3" id="chap1">
<h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
</div>
</div>
</div>
Aaaand here's some images of the menu and an example of where I'd like the Chapter 1 button to scroll to
Frontpage
Navbar
Where I'd like it to scroll to
Thank you so much in advance!
It seems like, your link is not valid, you are adding menutext inside the href which should actually take the link or the id of the anchor element
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
It seems like menu text is a class name, which should be added in the class
Is it possible in angular with primeNg v 4.3.0 and Angular 5 to resize 2 layouts in the same screen like the windows 10 explorer in the picture below ? Or is possible with pure css ?
If no, why ? And if yes, how is that possible? I tried anything ...
Thank you very much for your answers !!!!!!!
<div class="ui-g">
<div class="ui-g-2 ui-g-nopad">
<p-panel>.... </p-panel>
</div>
// wanna put here a vertical line and pull right left, so the 2 panels gonna be resized ...
<div class="ui-g-10 ui-g-nopad">
<p-panel>.... </p-panel>
</div>
</div>
I am trying to learn Material in combinaton with Angular so that I can later apply the Material Design pattern to my applications. After browsing around I found Material2 for Angular and installed it on my machine through NPM. The website describes all the components it has and I first tried to start with the navigation components. After fiddling around a bit I found out that the components were not responsive. After some research I found out that flex layout could make the components work in combination with Material2. One thing I noticed on the Material2 website was that when I narrow the browser down to mobile device sizes, it would change the navbar (which has a few buttons) to this:
I marked the three buttons with a red box (Components, CDK, Guides). This is what I want to recreate, but as far as I know, there are no navbar components for Material2. Altough the navbar has Material2 buttons in it:
I was wondering how they made this, what do I need to have in order to do this? Can it be build in Material2 or should I use something else?
Thanks in advance.
FlexLayout offers a Responsive API, which lets you define different layout properties based on the media query, e.g.:
<div fxLayout='column' class="zero">
<div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div>
<div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two">
<div fxFlex="22" fxFlex.md="10px" fxHide.lg class="two_one"></div>
<div fxFlex="205px" fxFlex.md="65" class="two_two"></div>
<div fxFlex="30px" fxFlex.md="25" fxShow [fxHide.md]="hideBox" class="two_three"></div>
</div>
<div fxFlex class="three"></div>
</div>
Install FlexLayout through npm in your project.
Steps to install FlexLayout:
npm install #angular/flex-layout –save
or with yarn
yarn add #angular/flex-layout
And if you do not want to use FlexLayout, you can use Bootstrap4 & material design, refer 'https://mdbootstrap.com/docs/angular/navigation/navbar/'
i have just starting Angularjs and need some help.
i am working on ANGULAR 4 SPA project where i have side bar with 100 tabs in it . each tab has different content .
Below is the image of side bar
. SO i tried simple approach by creating few components for each tab and adding them in Routes and loading them in and it works fine .but in this approach i will have to create 100 component for each tab .which i think is not the effecient way .
So is there any other way /industry standard for this ?
Thanks and regards.
You don't have to have 100 separated components. I' ve done multiple applications with similar problem. You need one component - SidebarComponent and in there you need to render 100 anchor tags with simple *ngFor. It would look something like this inside sidebar.component.html:
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li *ngFor="let menu of user.menus">
<a href="#" [routerLink]="[menu.url]"
<span> menu.code </span>
</a>
</li>
</ul>
</nav>
Hope it helps!
I'm trying to use Bootstrap 3.0 as a template to create a website. The issue I'm having is that when you refresh the page all of the text disappears. It does not do it every time but 8/10 times it does. Here is the demo I have put on my website for you guys to check it out. http://dwayned.co/JSwebsite/
Please let me know if you have any questions or need to see any code.
Your HTML is quite messed up. Bootstrap structure should be like this...
<div class="container">
<div class="row">
<div class="col-xs-12">
YOUR CONTENT HERE
</div>
</div>
</div>
In the above example I've used one col-xs-12 class but you can use any combination of cols here as long as they add up to 12. See more on the Bootstrap grid system here in their docs: http://getbootstrap.com/css/#grid
I also notice in your code you are using a span12 class but this is from Bootstrap v2 and not the new v3 which uses the col classes I've outlined in my example above.
I found this existing thread that has a couple different answers referring to your issue. https://stackoverflow.com/questions/21984543/google-chrome-bug-website-not-displaying-text