I'm writing a landing page using bootstrap 4.3.1.
After adding the "row" div, the horizontal ruler disappears and I just can't get it back.
The funny thing is when I'm adding the commented section tag, I can see the horizontal line again.
Any suggestions to why it happens/how to make the horizontal line visible again without the section tag?
<div class="container">
<div class="row">
<header class="text-center">
<h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
</header>
<!-- <section> -->
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
<!-- </section> -->
</div>
</div>
what you are trying to do is bit confusing as hr tag gives the horizontal line with width=100% and the row occupy a horizontal row
so think again is this possible, try to close the div of rows and then try to put the hr tag
<div class="container">
<div class="row">
<header class="text-center">
<h1 class="text-uppercase"><strong>The biggest startup event of theyear</strong></h1>
</header>
</div>
<!-- <section> -->
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
<!-- </section> -->
</div>
Related
I have this problem.
I have a component calls navbar and it is fix for all app.
<div class="wrapper" fixed>
<nav id="sidebar" [ngClass]="{'active':!navbarOpen}">
<div [ngClass]="{'sidebar-header':navbarOpen,'sidebar-header-active':!navbarOpen}" >
<h3 align="left">CHROMAE PROJECT</h3>
</div>
</nav>
<div id="content" [ngClass]="{'active':!navbarOpen}">
<nav class="navbar navbar-default fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button class="btn btn-info navbar-btn" type="button" (click)="myClickEvent()" >
<i class="glyphicon glyphicon-align-left"></i>
<span>MENÚ</span>
</button>
</div>
</div>
<div align="right">
<button class="btn btn-info navbar-btn" align="right" type="button" (click)="logOut()" >
<span>LOGOUT</span>
</button>
</div>
</div>
</nav>
</div>
</div>
So in other component calls home i have this:
<app-navbar>
<div>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
<div *ngIf="getIsModerator()">
hola Admin
</div>
<div *ngIf="getIsUser()">
hola Admin
</div>
</div>
Can i put the "div" with ngIf like that?
<app-navbar>
navbar.div with id = content = {
<div>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
<div *ngIf="getIsModerator()">
hola Admin
</div>
<div *ngIf="getIsUser()">
hola Admin
</div>
</div>
}
Because im trying too add inside navbar div class with id="content" that divs with *ngIf.
I dont know if i can explain my self :D
It looks like you are trying to use something like <ng-content> and content projection. Here is a useful article explaining it a little.
Here is a Stackblitz demoing a very small ng-content example.
For quick reference, in your "parent" component (in your case your nav-bar) you will tell angular where you want nested content to go:
nav-bar.component.html
<div class="wrapper" fixed>
<!-- your nav-bar code -->
<!-- nested content will go here -->
<ng-content></ng-content>
</div>
Then when you use your nav-bar, you can "project" content into that ng-content tag:
app.component.html (or any other component)
<nav-bar>
Here is some content to project into the nav-bar's ng-content
</nav-bar>
See the stackblitz for the full code. There is also a way to have multiple ng-content tags using selectors. The article explains those if you need to have more projected slots.
It looks like you have some complex logic in your nav-bar so I didn't try to reproduce your code. The small demo should get you started in the right direction, though.
You can control the getIsAdmin in the own app-nav
Or you can use <ng-content> in your app-navbar
<div class="wrapper" fixed>
....
<ng-content></ng-content>
</div>
So, in your main.html you can do
<app-navbar>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
...
</app-navbar>
i have 3 divs in a bootstrap well
i want my btn-groups on the same line, the first on the left, the second in the center and the last one on the right
is it possible ?
i don't want to use an external CSS file
<div class="well">
<div>
Unit of time
<div class="btn-group">
<!-- button -->
<!-- button -->
<!-- button -->
</div>
</div>
<div>
Offset
<div class="btn-group">
<!-- button -->
<!-- button -->
</div>
</div>
<div>
Dates padding
<div class="btn-group">
<!-- button -->
<!-- button -->
</div>
</div>
You can get it 3 in a row by using bootstrap grid system as like,
<div class="container">
<div class="row">
<div class="col-xs-4>
</div>
<div class="col-xs-4>
</div>
<div class="col-xs-4>
</div>
</div>
</div>
Yes it's, you can simply use a grid, by adding each button group in a column, the three button in a row and the whole group inside a container
See an example there : http://getbootstrap.com/css/#grid
I want to reduce jumbotron's height not with pixels but percentage of something (ex. div's height, windows height). What is the best way to do it appropriate with different window sizes and responsive design.
Here is my code:
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<!-- START PAGE CONTENT -->
<div class="content">
<div class="social-wrapper">
<div class="social " data-pages="social">
<!-- START JUMBOTRON -->
<div class="jumbotron" data-pages="parallax" data-social="cover">
<div class="cover-photo">
<img alt="Cover photo" src="assets/img/social/cover.png" />
</div>
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
<div class="inner">
<div class="pull-bottom bottom-left m-b-40">
<h5 class="text-white no-margin">Team Members</h5>
<h1 class="text-white no-margin"><span class="semi-bold">Lemp</span> Team</h1>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
</div>
<!-- END PAGE CONTENT -->
Thanks.
You can make the jumbotron maintain aspect ratio.
Check Sean Dempsey fiddle.
Just modify
<div class="box sixteen-nine">
<div class="content">
<span>16:9</span>
</div>
to your jumbotron
You can see Chris Coyer full explanation
I have a container that contains two rows. I want there to be a border around the container (not between the two rows). When I tried to set a border around the container, it gave me a border between the two rows - not sure what I should be doing differently here.
<div class="container-fluid" style="border:1px solid #cecece;"
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
Your code is almost perfectly fine.
Look at first line of it - > is missing.
See working example below.
http://jsfiddle.net/864cw2fn/
<div class="container-fluid" style="border:1px solid #cecece;">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
<div class="container-fluid table-bordered">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
</div>
I'm new to bootstrap and I wonder how can we give an element a full width of the screen? for example I have an <hr>element that I want it width to be take the full screen.
I notice that row is taking -15px margin-left and margin-right, how can we remove that margin without affecting other rows in the website?
Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (See full screen for better view)
HTML:
<div class="row">
<div class="content">
<div class="container">
<h1>Welcome to my website!</h1>
</div>
<div class="container-fluid">
<hr>
</div>
</div>
</div>
Thanks!
You simply have to put it out of the container.
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
<hr> <!----- here -->
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>