I have this HTML code:
<div id="login-page" class="row">
<div class="col s12 m6 l4 z-depth-6 card-panel teal">
<h1>Hi</h1><br/>
</div>
</div>
I want a l4 and m6 centered column. s12 does it pretty well, but l4 always stay at the left on big screens. How can I center this columns?
Try adding classes offset-m3 and offset-l4 to your div:
<div id="login-page" class="row">
<div class="col s12 m6 offset-m3 l4 offset-l4 z-depth-6 card-panel teal">
<h1>Hi</h1><br/>
</div>
</div>
Related
I want to resize column width in bootstrap.
Curently, I have 3 <div> with col-md-4. But when one of the <div> hides then I want to change another 2 <div>'s into col-md-6.
Is this possible in bootstrap?
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-4">
</div>
<div id="txthide">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</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 a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/