We Keep Coding

How to make this DIV scroll down ONLY to end of its section?

Consider the code below:
What I need to do is to have <div class="col-lg-12 kip"> and all it's content scroll down only to the end of section workOne and NOTHING BEYOND THAT ..
I have attached an image here that will show you what happens now to this fixed div,
as you can see in the image, it leave its section and goes beyond the button / what I need to do is that have it stop and the end of the section or RIGHT ABOVE THE BUTTON.
How can I do this either in CSS or JS / please be detailed as much as you can because as a beginner I may need illustration.
IMAGE TO SHOW THE ISSUE
<section id="workOne">
<div class="container">
<div class="row">
<!-- #### DIV CLASS "kip" is what need to be fixed and scroll down to end of this section#### -->
<div class="col-lg-12 kip">
<h2>Kipeesh Language Check // Version 1.0</h2>
<p>Client asked to develop a simple language learning app.</p>
<ul class="kipul">
<li>Development in progress</li>
<li>Will be made to fit Wordpress</li>
<li><mark>html</mark> <mark>css</mark> <mark>javascript</mark> <mark>php</mark></li>
</ul>
</div>
<!-- #### ONE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>01. Overview</p>
<img src="assets/images/kip1.jpg">
</div>
<!-- #### TWO #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>02. Create a button to hide elements.</p>
<img src="assets/images/kip2.jpg">
</div>
<!-- #### THREE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>03. Put the button to work / hide elements</p>
<img src="assets/images/kip3.jpg">
</div>
<!-- #### FOUR #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>04. Add a reveal button to display one item at a time</p>
<img src="assets/images/kip4.jpg">
</div>
<button type="button" class="btn btnWork btn-outline-light btn-lg">View Version 1.0</button>
</div>
</div>
</section>
<!-- #### DIV CLASS "kip" must end here and and scroll down further to the next section #### -->

Done, fixed with the following:
.kip{
position: sticky;
top: 50%;
}

Bootstrap dropdown div from row that spans entire container

I have a bootstrap row with n number of 150x150 images. I have this js fiddle here: https://jsfiddle.net/tzachary89/4dnva3p4/
Whenever one of these images is clicked I'm trying to have something that looks like this: https://i.imgur.com/j7gaLLt.png
So whenever I have an image that is clicked I want a div to show that covers the underlying rows. The div may end up being taller than the one in the picture.
how can I get my dropdown menu to span the entire row and to cover the row beneath it? (without pushing the below row down)
<div class="container">
<div class="row" style="background-color:#8faad8;">
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-5" style="margin: 2px 0px 0px 0px;" id="tile1">
<img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg">
<div class="container" style="background-color: white;">
<div class="row">
<div class="col-md-2">
<button class="btn btn-primary">asdf</button>
<button class="btn btn-primary">asdf</button>
</div>
</div>
</div>
</div>
</div>
</div>

Angular show and hide multiple elements

I am trying to create a simple accordion menu - display: none display: block.
I'm having difficulty showing and hiding individual elements one by one at the moment when i click one accordion menu ALL accordion hidden menus are displaying. Does any know how i can solve this issue. I am aware I can use bootstrap how i want to custom build this...
Below is snippets of my code.
Angular
$scope.frqToggle = function () {
$scope.hiddenToggle = !$scope.hiddenToggle;
}
HTML
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
Some text goes here
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseOne" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
hidden menu goes here
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default">
<!-- PANEL STARTS HERE -->
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
some text
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseTwo" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
SOME TEXT
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default"> <!-- PANEL STARTS HERE -->
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
<strong>Q: </strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseThree" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
<strong>A: </strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>
Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>
Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>
<small><strong>13/09/2016 | </strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>

You need a seperate variable for each element you want to show/hide:
$scope.hiddenToggleOne = false;
$scope.hiddenToggleTwo = false;
$scope.hiddenToggleThree = false;
//one fore each ...
$scope.frqToggle = function (toggleElem) {
toggleElem = !toggleElem;
};
You markup:
<div ng-click="frqToggle(hiddenToggleOne)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
Some text goes here
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseOne" ng-class="{isHidden: hiddenToggleOne}" class="panel-collapse">
<p>
hidden menu goes here
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default">
<!-- PANEL STARTS HERE -->
<div ng-click="frqToggle(hiddenToggleTwo)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
some text
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse">
<p>
SOME TEXT
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default"> <!-- PANEL STARTS HERE -->
<div ng-click="frqToggle(hiddenToggleThree)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
<strong>Q: </strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse">
<p>
<strong>A: </strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>
Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>
Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>
<small><strong>13/09/2016 | </strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>

Create an object to maintain which accordion is open. Lets say you have an accordion with 3 menu items that can open. Have an object like this which maintains which menu is open and which is closed.
$scope.accordion_visibility = {
menu_1: true,
menu_2: false,
menu_3: false
}
Now create a method to toggle the visibility of a menu.
$scope.toggleMenuVisibility = function(menu_name){
$scope.accordion_visibility[menu_name] = !$scope.accordion_visibility[menu_name];
}
Now in the view, use ng-show="accordion.menu_1", ng-show="accordion.menu_2" etc on each menu item. Also, add ng-click listener on each like ng-click="toggleMenuVisibility('menu_1')", ng-click="toggleMenuVisibility('menu_2')" etc on each menu. It should work.

button 1
<a (click)="iconClick(1)">
<p style="color:gray;">
nr 1 Create Documents from Scratch
</p>
</a>
button 2
<a (click)="iconClick(2)">
<p style="color:gray;">
nr 2 Create Documents from Scratch
</p>
</a>
on text 1
<div class="col-12" *ngIf="icon == 1"></div>
on text 2
<div class="col-12" *ngIf="icon == 2"></div>
on component
icon = null;
iconClick(number) {
this.icon = number;
}

Display card list horizontally, HTML/CSS with Angular and MaterializeCSS

I want to display a list of custom cards using ng-repeat directive, but it keeps displaying vertically.
<style>
li{
display: inline
}
</style>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li ng-repeat="x in names">
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title" id="dani">{{x}}</span>
<p id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
What am I doing wrong?
UPDATE:
display: inline-flex;
fixes the problem, but puts the objects one after another on the same row. I want to go to a next row after lets say, 4 objects, so how can i set this up?
Update 2:
here's what i want to achieve:
so after 3 card displayed horizontally the line to increase :)

for li tag use floating to left
li {
float: left;
}
additionaly for ul add list-style-type:none;

The problem is that your repeat is on the line item. You are literally telling it that you want it vertically. Move your repeat to the span tag, you may also need to add display of inline-block and set a width on your span. Try this:
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span style="display:inline-block; width:100px" ng-repeat="x in names" class="card-title" id="dani">{{x}}<br>
<span style="display:inline-block" id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</span></span>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Here is a Plunker. Let me know if this is not what you were trying to do.

How to center all divs in bootstrap 3

I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.
Here's the code :
<div class="container">
<div class="header text-info">
<h1>Heading</h1><br />
<h2>Acc. Type</h2><br />
<h3>Month</h3>
</div>
<legend>Income</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div>
</div>
<legend>Expense</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div><!-- /col-md-12 -->
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
</div><!-- /acc-content -->
</div>
DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).
I expect all the divs to center aligned like this : (red border is just a test)
Please be adviced.

Add col-md-offset-*. For example:
<div class="col-md-10 col-md-offset-1">
and
<div class="col-md-8 col-md-offset-2">
You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.
DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
DOCS: http://getbootstrap.com/css/#grid-offsetting

using block-center class wrapping using row

all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:
if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place

You need to add this to the divs:
.acc-content div[class*='col-md-'] {
float: none;
margin: 5px auto;
}
First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.

Bootstrap 3 has a mixin called center-block found in utilities.less.
First, add class center-block to elements that should be centered.
Then, if using Less, add to CSS:
.center-block {
.center-block();
}
If using plain CSS, add:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

in this example replace this
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
with this
<div class="col-md-10 col-md-offset-1">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8 col-md-offset-2">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
add class col-md-offset-"number of cols" to col- divs