I see content-container class in bootstrap templates.... but not find in any bootstrap css file
what is use of this class?
code is..
<div id="hero-divider" class="content-container homepage_steps">
<div class="container">
<div class="col-sm-12 col-md-4 text-center">
<p><i class="hidden-xs hidden-sm fa fa-search"></i></p> <h3 class="bold sm-nomargin">Search</h3> <p class="sm-bmargin">Search To Find Members</p> </div>
<div class="col-sm-12 col-md-4 text-center">
<p><i class="hidden-xs hidden-sm fa fa-check-circle"></i></p> <h3 class="bold sm-nomargin">Review</h3> <p class="sm-bmargin">Compare Members You Find</p> </div>
<div class="col-sm-12 col-md-4 text-center">
<p><i class="hidden-xs hidden-sm fa fa-comments"></i></p> <h3 class="bold sm-nomargin">Connect</h3> <p>Contact Members You Like</p> </div>
</div>
</div>
The content-container class is not from bootstrap.
I suspect your html is from a template where this class is defined in a <style> tag or an external css file.
Related
What prettier rules do I need to make the formatting like this. To keep the tags on new lines and the text between them?
<template>
<div class="row">
<div class="col-sm-6 col-lg-8">
.col-sm-6 .col-lg-8
</div>
<div class="col-6 col-lg-4">
.col-6 .col-lg-4
</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>
My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
I am trying to put a click event in an anchor tag but the event is not showing in chrome.
below is the html
<div class="col-md-4 col-sm-6 col-xs-12 paddInner" *ngIf="module.valid">
<div class="row marLeftRight_0">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="dashboard-icon ">
<img src="./assets/img/icon/Merchant_onboarding_03.png" alt="MerchantBoarding" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-8" >
<div class="dvIndexInnerHeader">
<a (click)="goTomethod()">ABC</a>
</div>
<p class="pSections">
asasasa
</p>
</div>
</div>
</div>
component.ts
public goTomethod() {
this.module.goTomethod();
}
I'm using MaterializeCSS for creating layouts, I've got a container which contains 2 rows but any content which is not in column displays outside of container.
Here is my code:-
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">World
<div class="col s12">Hello</div>
</div>
</div>
</div>
And here is how it looks:-
Container Layout
Why is this happening even though my content is inside container and should also display within container boundaries?
Edit:
<div class="add-arena grey lighten-3">
<div class="row">
<div class="col s12 center deep-orange white-text">Add Arena</div>
</div>
<div class="row">
<div class="add-arena-image-holder col s4">
<form action="#">
<div class="file-field input-field col s11">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
<div class="add-arena-description col s8">
<div class="row">
<div class="input-field col s6">
<input placeholder="What will it be called?" id="first_name" type="text" class="validate">
<label for="first_name">Arena Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Arena Number" id="first_name" type="text" class="validate">
<label for="first_name">Arena</label>
</div>
</div>
<div class="row">
<div class="col s3 right">
<a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
</div>
</div>
</div>
</div>
</div>
All content should be in the actual cols as the rows apply negative margins to stretch them to the full width. Always put the content in the col's.
https://codepen.io/anon/pen/EXZzVr
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">
<div class="col s12">Hello World</div>
</div>
</div>
</div>
What exactly do you want to achieve?
Take a look at following lines:
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368
I'm trying to use the Bootstrap affix to create two "sticky" blocks side by side on top in the content area but they do not behave as expected. They always either overlap each other and/or the content or does not fill their parent.
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<text id="menu"></text>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-9 col-md-push-9 col-sm-push-9 col-xs-push-9" id="sticky2" data-spy="affix">
<text id="right"></text>
</div>
<div class="col-lg-7 col-md-7 col-sm-9 col-xs-9" id="sticky1" data-spy="affix">
<h1><span class="hidden-lg hidden-md hidden-sm">XS</span><span class="hidden-lg hidden-md hidden-xs">SM</span><span class="hidden-lg hidden-sm hidden-xs">MD</span><span class="hidden-md hidden-sm hidden-xs">LG</span></h1>
<text id="top"></text>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="row contentRow" id="contentRow">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: yellow;">
<text id="content"></text>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Have a look at this fiddle: http://jsfiddle.net/halvorsen/1zv6gqwu/42/
Any suggestion on how to solve this?
Do I have to set the size on the "sticky" blocks using JavaScript?