i create below grid by this code ,
complex grid bootstrap:
but when resize the browser window,panels layout not true.excuse me if my eng language is not good.
.mm{
border-radius:5px;
border:2px solid black;
color:black;
font:bold 50px b yekan;
text-align:center;
}
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12 pad "><div class="mm" style="height:150px;background-color:#c78221">1</div></div>
<div class="col-md-3 col-sm-3 col-xs-12 pad"><div class="mm" style="height:300px;background-color:#ffd800">2</div></div>
</div>
<div class="row">
<div class=" col-md-2 col-sm-3 col-xs-12 pad" style="top:-150px"><div class="mm" style=" height:300px;background-color:#9158ee">3</div></div>
<div class="col-md-7 col-sm-6 col-xs-12 pad" style="top:-150px"><div class=" mm" style="height:150px;background-color:#ff006e">4</div></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 pad" style="top:-300px"></div>
<div class="col-md-2 col-sm-3 pad" style="top:-300px"><div class="mm" style="height:150px;background-color:#4cff00">5</div></div>
<div class="col-md-4 pad" style="top:-300px"><div class="mm" style="height:300px;background-color:#1f9cdc">6</div></div>
<div class="col-md-4 pad" style="top:-300px"><div class="mm " style="height:300px;background-color:#ff00dc">7</div></div>
</div>
<div class="row">
<div class="col-md-4 pad" style="top:-450px"><div class="mm" style="height:150px;background-color:#1a8d43">8</div></div>
</div>
First see the official bootstrap page and learn how to grid system work.
Grid system here
i have created a demo for you on bootply
Bootply demo
hope this help
Related
I am using Firefox Quantum.
It's something different than Mozzila firefox. I can't use firebug now as it is not supporting.How can i verify that the i am on a different frame.
As currently i can't write on the popup message. Maybe it is on different frame.
Can anyone explain me with proper example.
The HTMLM of the code is:-
<div class="store_form">
<div class="row">
<div class="col s12 m12 marg-top">
<div class="row">
<div class="col s12 m6 store_band_contact">
</div>
<div class="col s12 m6 store_add_left">
</div>
</div>
</div>
<form id="form_contact" class="col s12 m12" novalidate="novalidate">
<div id="errorMsg"></div>
<!-- <div class="row">
<p class="col s12" style="font-size: 15px;" >
<strong id="buyer_company"></strong>
</p>
</div> -->
<!-- <div class="row">
<p class="col s12" id="">Subject: Request to remove my bid
</p>
</div> -->
<div class="row">
<div class="input-field col s12">
<span class="editFiledHeading">Request to remove my bid</span>
<!-- Contact Seller -->
<textarea name="comment" maxlength="20000" id="comment" class="ckeditor" placeholder="" style="visibility: hidden; display: none;"></textarea><div id="cke_comment" class="cke_1 cke cke_reset cke_chrome cke_editor_comment cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_comment_arialbl" style="width: 99.8%;"><span id="cke_comment_arialbl" class="cke_voice_label">Rich Text Editor, comment</span><div class="cke_inner cke_reset" role="presentation"><span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;"><span id="cke_12" class="cke_voice_label">Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_12" onmousedown="return false;"></span></span><div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_16" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, comment" aria-describedby="cke_16" tabindex="0" allowtransparency="true" style="width: 439px; height: 100%;"></iframe></div></div></div>
<input type="hidden" name="bid" id="bid_id" value="1035">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col s6">
<p style="margin: 5px 0 0;">
<input type="checkbox" name="is_copy" id="is_copy" value="1">
<label for="is_copy">Send me a copy</label>
</p>
</div>
<div class="col s6">
<span class="right remainingLimit" id="comment_label" data-length="2500">Remaining: 2500</span>
</div>
</div>
<div class="row">
<div class="col s12">
<p class="defaultP">
If you like to remove a bid you can do that by
sending the request to the seller. Please make
sure that you state the reason for doing this.
Obvious accidents by using the wrong value are
easy to justify.
Please note that it is up to the seller to accept
or decline your request!
</p>
</div>
</div>
<div class="row">
<div class="col s12 center" style="margin: 20px 0 15px;">
<button class="transParentBtnSmall">Submit</button>
</div>
</div>
</form>
</div>
</div>
I have been trying to align three equal columns exactly in the center of a row with equal padding on both sides, inside a container-fluid. I am unable to position them at the center of the page. I have tried setting width to the container inside which those three columns are residing. but the layout keeps going one side and never gets aligned at the center.
<div class="container">
<div class="row yellow">
<div class="col-lg-12 ">
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
</div>
</div>
</div>
Attached is the output that I am recieving:
output
As Shown here, the layout is aligned to right, I want it to align perfectly center with equal padding in between these columns.
It would be good to know how this can be achieved, I've been trying to get this one done for a while. your suggestions will definitely help in fixing this one.
Thanks in advance
Your problem is, that your layout is not summing to 12 columns..
col-lg-3 + col-lg-3 + col-lg-3 are summing to 9 columns and in bootstraps grid-system you have 12 columns per row.
also there is no col-xxs-** class. (lg = large; md = medium; sm = small; xs = extra small)
this shoud do the trick:
<div class="container">
<div class="row yellow">
<div class="col-lg-12 ">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
</div>
</div>
</div>
Take a look at Bootrstaps Docs to learn more about the Grid-System: http://getbootstrap.com/css/#grid
As #Sadi says, the layout is made of 12 cols, so you shoold change your columns from col-lg-3 to col-lg-4. Plus, you should apply your green to the inner container, otherwise you will have no padding:
<div class="container">
<div class="row yellow">
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
</div>
Codepen: https://codepen.io/giannidk/pen/ZymdOy
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 have an in img in boostrap and i want it to show in right and to show 4 objects in the left in two rows each one has two objects which is 4 columns from the grid
My HTML
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product first wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" >
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Energy</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="banner">
<img src="http://placehold.it/300x450">
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
</div> <!-- end of row-->
MY CSS
.product{ overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;}
.product p {position: absolute; top: 10%; left:200%; color: white;
z-index: 2000; font-size: 20px; opacity:0; transition:all 0.5s;}
.product h6 {position: absolute; top: 40%; left:-200%; color: white;
z-index: 3000; font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px;
transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); }
and this is the result that shows up
http://i.imgur.com/2PhECdx.jpg
I have modified your code to make two columns and the first column is containing two rows with two columns.
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
</div>
</div>
Check this:
http://jsfiddle.net/h68hzfnc/
I am creating few accordions using bootstrap 3. My requirement is all accordions should be expanded by default in 1024 resolution and above. on click it should hide
But in mobile devices it should be in collapse mode by default. on click it should expand
Here is my code:
<div class="panel-group" id="accordion">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- Asia Starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
Asia
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">China
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">India
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Thailand
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Singapore
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- Asia ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- europe starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Europe
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Germany
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">The Netherlands
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Denmark
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Italy
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">France
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Belgium
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Sweden
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- europe ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- middle east north africa starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Middle East and North Africa
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">UAE
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Israel
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Saudi Arabia
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Egypt
</div>
</div>
</div>
<!-- flags-->
</div>
</div>
<!-- middle east north africa ends-->
</div>
</div>
<!-- 1st row ends-->
</div>
http://jsfiddle.net/monicaRegal/q5rLx1dn/1/embedded/result/
Thank you
Monica Mandal
Try this:
$(document).ready(function(){
var windowWidth = $(window).width();
if(windowWidth <= 1024) //for iPad & smaller devices
$('.panel-collapse').removeClass('in')
});
In your css:
#media (max-width: 768px)
{
.collapse.in {
display: none;
}
}
Abdulla's answer almost worked for me, however, I had to use collapse() instead of removeClass('in')
jQuery(document).ready(function(){
var windowWidth = jQuery(window).width();
if(windowWidth <= 1024) { //for iPad & smaller devices
jQuery('.panel-collapse').collapse()
}
});
Try This.
function adjustCollapseView(){
var desktopView = $(document).width();
if(desktopView >= "1024"){
$("#accordion a[data-toggle]").attr("data-toggle","");
$("#accordion .collapse").addClass("in").css("height","auto")
}else{
$("#accordion a[data-toggle]").attr("data-toggle","collapse");
$("#accordion .collapse").removeClass("in").css("height","0")
$("#accordion .collapse:first").addClass("in").css("height","auto")
}
}
$(function(){
adjustCollapseView();
$(window).on("resize", function(){
adjustCollapseView();
});
});