Can you nest Bootstrap containers? - twitter-bootstrap-3

From the docs at http://getbootstrap.com/css/
You may choose one of two containers to use in your projects. Note
that, due to padding and more, neither container is nestable.
and
Turn any fixed-width grid layout into a full-width layout by changing
your outermost .container to .container-fluid.
The second sentence seems to imply that you can have nested containers. The first sentence seems to imply that there should be a single container one a page.
Which is it?
(A case might be wanting to nest a container-fluid inside a container - or simply inside some other element with a fixed width).

You are correct on the ability to use container-fluid
h4 {
margin-top: 25px;
}
.container {
border: solid 5px red;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-bottom: 0;
}
.nested-container {
border: solid 3px green;
}
.container-fluid {
border: solid 3px blue;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
</div>
<div class="container nested-container">
<div class="row">
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
</div>
</div>
</div>
</div>

Related

Materialize Css datePicker works for the first-time. When I choose the same Picker the next time The picker comes and goes

My materialize DatePicker works only for the FirstTime
I am using Materialize for devloping a site which invloves date-picker. The date-picker works only for the first load of a page. When we select the date for second-time it comes and goes.
How to solve this type of problem? Any help is greately Appriciated. Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--=============== basic ===============-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Compiled and minified CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
h5{
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: .5px;
color: #98AAB8;
margin-right: -.5px; font-weight:700; font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
input {
line-height: normal;
padding: 10px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
font-family: quick-sand, sans-serif;
font-size: 13px;
}
.input_field1{
line-height: normal;
padding: 12px 9px 12px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
font-family: quick-sand, sans-serif;
font-size: 13px;
margin-bottom: 20px;
}
.text_area{
padding:69px 280px;
}
.input_date{
line-height: normal;
padding: 13px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
margin-bottom: 20px;
}
.form_header {
font-family: quick-sand, sans-serif;
font-size: 13px;
/* float: left; */
text-align: left;
margin-bottom: 10px;
font-weight: 500;
color:#666;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
position: absolute;
margin-top: 13px;
margin-left: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.posterImg{
text-align: center;
margin: 0px 0;
width: 164px;
height: 159px;
padding: 55px 2px 11px 5px;
border: 1px solid #2F3B59;
border-radius: 7px;
font-size: 12px;
color: #98AAB8;
margin-bottom: 20px;
}
.breadcrumb:before {
content: '\E5CC';
color: rgba(255,255,255,0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #566985;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
/* color: #ffab40; */
color: #566985;}
textarea.materialize-textarea {
overflow-y: hidden;
border: none;
border: 1px solid #2F3B59;
padding: .8rem 0 1.6rem 0;
resize: none;
min-height: 3rem;
border-radius: 7px;
background: #f9f9f9;
}
input[type=text]:not(.browser-default){
background-color: transparent;
border: none;
/* border-bottom: 1px solid #9e9e9e; */
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 20px 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<!-- Fav icon -->
</head>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper" style="background: #2F3B59;">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div style="height:30px; background:white;"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m10">
<nav style="border: 1px solid #eee;background: #F8FBFE; border-radius:5px;">
<div class="nav-wrapper">
<div class="col s12">
Add Listing
Add conference
Profile
Home
</div>
</div>
</nav>
</div>
<div class="col s12 m1"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m3">
<div class="card sticky-action" style="border: 1px solid #eee;">
<div class="card-action">
<div class="card" style="background: #F8FBFE; border-radius:5px;border: 1px solid #eee;">
<div class="card-action">
Edit Profile
</div>
<div class="card-action">
Add event
</div>
<div class="card-action">
Added Events
</div>
<div class="card-action">
<a class="waves-effect waves-light btn-small" style="background: #4DB7FE; color: #566985;">Save</a>
</div>
</div>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s12 m7">
<h5 style="text-align:center;font-family: quick-sand, sans-serif;">Conference Details</h5>
<div class="row">
<div class="col s12">
<div class="form_header">Conference Link</div>
<i class="fa fa-link"></i><input type="" class="input_field1" placeholder="Conference Link" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Name</div>
<i class="fa fa-address-book"></i><input type="" class="input_field1" placeholder="Conference Name" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference URL</div>
<i class="fa fa-link"></i> <input type="" class="input_field1" placeholder="Conference URL">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Registration URL</div>
<i class="fa fa-ticket"></i> <input type="" class="input_field1" placeholder="Conference Registration URL">
</div>
<div class="col s12 m6">
<div class="form_header">Conference Start Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker1" placeholder="yyy-mm-dd" onclick="jithendra()">
</div>
<div class="col s12 m6">
<div class="form_header">Conference End Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker2" placeholder="yyy-mm-dd" onclick="jithendra1()">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter Handle</div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" placeholder="City">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m12">
<div class="form_header" style="margin-top:20px;">City</div>
<i class="fa fa-map-marker"></i> <input type="" class="input_field1" type="text" placeholder="City">
</div>
<div class="col s12 m12">
<div class="form_header">Venue</div>
<i class="fa fa-map-marker"></i><input type="" class="input_field1" type="text" placeholder="Venue">
</div>
<div class="col s12 m12">
<div class="form_header" style="width: 338px;">Keywords</div>
<input type="" class="input_field1" type="text" placeholder="Keywords">
</div>
<div class="col s12 m12">
<div class="form_header">Conference City</div>
<input type="file" class="input_field1" type="text" placeholder="Venue" style="opacity:0px;">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee;margin-bottom:20px;margin-top: 21px;"></div>
</div>
<div class="col s12 m12">
<div style="height:10px;"></div>
</div>
<div class="col s12 m12">
<a class="waves-effect waves-light btn" style="background: #2F3B59;border-radius:5px;">Submmit</a>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<!-- <div class="col s12 m4">
<div class="form_header" >Poster Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div>
<div class="col s12 m3"></div>
<div class="col s12 m4">
<div class="form_header" >Card Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div> -->
<!--
<div class="col s12 m12">
<hr>
</div>
<div class="col s12 m12">
<h5>My Socials</h5>
</div>
</div>
<div class="col s12 m12">
<div class="form_header">Facebook </div>
<i class="fa fa-facebook"></i><input type="" class="input_field1" type="text" placeholder="https://facebook.com/">
</div>
<div class="col s12 m12">
<div class="form_header">LinkedIn </div>
<i class="fa fa-linkedin"></i><input type="" class="input_field1" type="text" placeholder="Linkedin.com">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter </div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" type="text" placeholder="https://twitter.com/">
</div>
</div> -->
</div>
</div>
</div>
<footer class="page-footer" style="background: #2F3B59;">
<div class="container">
<div class="row">
<div class="col s12 m3">
<h5 class="white-text">KonfHub</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script>
function jithendra(){
$('.modal').modal();
$('#datepicker1').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
function jithendra1(){
$('#datepicker2').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
</script>
</body>
</html>
I changed a few things in your code. You were using both the versions of Materialize 1.0.0 and 0.100.2, no idea why you should use only one version and then I updated the jQuery methods as per the new version that is 1.0.0, you can check those on their website Picker - Materialize and Select - Materialize. You were using .input-date class but in order to use datepicker you've to use .datepicker class only, you can modify the CSS of .datepicker class. I added !important to the changes you've made to the .datepicker class, so you can have the modified CSS which you applied to .input-date. At last, you've given ids to individual datepickers, so you can either use the jQuery methods on ids or on class.
Codepen - Working Demo

Why are my columns overlapping vertically when I resize browser?

I'm practising bootstrap responsive web development, I've managed to make my webpage fairly responsive when I change the width however my middle columns overlap if I resize vertically. Here's the code:
<div class="container-fluid con">
<div class="row">
<div class="col-md-2 d-none d-md-block col1">
</div>
<div class="col-md-6 col2">
<p id="header-p">Full stack developer specialising in responsive website design and smooth user experience. Practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture</p>
<hr id="hr1">
<p id="header-tag">Web Developer - User Experience Designer - Graphic Artist
</p>
</div>
<div class="col-md-2 pic-col">
<img class="img-responsive rounded-circle img-thumbnail" src="#">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
<div class="container-fluid con2">
<div class="row">
<div class="col-md-2 d-none d-md-block col1"></div>
<div class="col-md-8 port-col"><h2 id="portfolio-header">Portfolio</h2>
<hr id="hr2">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
And the CSS:
#header-p{
margin-top: 10%;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
#header-tag{
padding-top: 1rem;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
.con{
margin: 4rem auto 2rem auto;
}
.col1, .col3{
border: 1px solid #bfbfbf;
background-color: #bfbfbf;
height: 100vh;
}
.col2{
background-color: #cccccc;
height: 60vh;
}
.pic-col{
background-color: #cccccc;
height: 60vh;
}
#portfolio-header{
text-align: center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 60px;
letter-spacing: 5px;
/*line-height: 90px;*/
max-width: 100%;
color: #b3b3b3;
}
.port-col{
max-height: 100vh;
}
.con2{
margin: 2rem auto 2rem auto;!important
}
the full code is here if I'm missing anything https://codepen.io/Seaplush/pen/rKVLmX

trying to use bootstrap 3 for nested columns but their being hidden

enter image description hereI'm trying to have an information panel with three different columns using bootstrap 3. I've nested the columns properly, I think, but the panels are hidden beneath the main row and I can't find a way to reveal it.
it's showing that the container is there, but you can't see it
<div class="row creative_line">
<div class="col-md-12">
<h2 class="text-center">Smart & Creative<br><p>This is why you will use it</p></h2>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 multi">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 ui">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 design">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
This is my current css
.creative_line {
background: yellow;
min-height: 300px;
color: $primary-color;
font-family: $font-stack;
}
.creative_line p {
color: $primary-color;
font-family: $font-stack2;
font-size: 35%;
margin-top: 10px;
}
h2 {
font-size: 40px;
}
.img-circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: red;
}
.multi,
.ui,
.design {
min-height: 300px;
color: blue;
z-index: 1;
}

Bootstrap column spanning 2 rows

Im trying to get a bootstrap column to span 2 rows. I have been been looking at How can I get a Bootstrap column to span multiple rows? and it doesnt seem to work in the context of my project.
Could someone tell me what I need to do in order to make the column on the right span 2 rows?
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
CSS
.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}
.index-b-right-3 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-3 a {
color: #CC9900;
}
I guess this is what you wanted to do?
Simple way i would explain it is you create the top most row, create the columns in the row, then in the other column, create another row which you then divide up into individual columns.
Hope it helps!
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the
Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
</div>
</div>

Center float left divs with twitter Bootstrap

I'm using Bootstrap v3.0.2. I want to display a series of divs next to each other, float: left then center that group in a full width row. What I get are the divs lined up next to each other but the entire group floats left.
I've tried numerous suggestions from this site but have been unable to make any of them work.
I have HTML:
<div id="wrapper">
<div class="container">
<div id="wrapBoxRow" class="row">
<div id="boxRow" class="col-md-12 col-xs-12">
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
</div>
</div>
</div>
</div>
Css:
#boxWrap, #boxRow, #wrapBoxRow
{
float: none;
margin: 0 auto;
}
.smallBox
{
border: 3px solid #ddd;
float: left;
width: 20px;
height: 20px;
margin-right: 12px;
}
I've tried this without bootstrap and couldn't get it to work either:
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
Please try the below CSS to horizontally center your div
#boxWrap, #boxRow, #wrapBoxRow
{
display: table;
margin: 0 auto;
}
You can find working code here http://bootply.com/92723