Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have just started to learn bootstrap. And this is the first time I have ever used grids for a layout. Something I don't understand about grids is where I should put my content.
Should I do like this:
<div class="row">
<div class="col-md-12">
<p> My content </p>
</div>
</div>
Or should I use a parent element for my content like this
<div class="row">
<div class="col-md-12">
<div> or <footer> or <aside> or <content> etc
<p> My content </p>
</div> or </footer> or </aside> or </content> etc
</div>
</div>
If the answer is the second. Is there ever a reason where it is okay to put content directly into the column? Or have I misunderstod everything and it should be done in a completly other way?
What is "best practice"?
The best way is like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="your-widget-name">
Widget code here…
<div>
</div>
</div>
This way, your widgets can be used across multiple layouts.
Using separate divs for the grid can increase the amount of markup, but make the code easier to maintain.
Content should be put inside your column as stated in bootstrap documentation
Both are correct in your example since grid is just for layout, you can put any block or inline elements in it.
Most important rule to follow - .container is parent,its child's are .row, .col goes inside rows and your content goes in .col.
Eg. You want to put Image on center with paragraphs on side.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<p>Lorem ipsum</p>
</div>
<div class="col-xs-4">
<img src="http://placehold.it/150x150" alt="image"/>
</div>
<div class="col-xs-4">
<p>Lorem ipsum summun</p>
</div>
</div>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am new to UI,
creating one blog layout in HTML with Bootstrap4, I am following this layout...'removed', how to create first div fixed and second scroll-able and then one full width banner and so on.
Before posting a question here, you need to try something from your end then if you are stuck, you can post questions here to get an answer.
First Step:
You need to learn the basics of HTML & CSS. (https://www.w3schools.com/html/html_css.asp)
To make a section FIXED, you need to use the POSITION property in CSS. (https://www.w3schools.com/css/css_positioning.asp)
I guess these are enough for you to get started.
Happy learning!
div class="container-fluid">
<div class="w-100 bg-dark" style="height: 50px;">
</div>
<div class="row" >
<div class="col-6 bg-primary" style="height: 50vh;">
<div class="position-fixed bg-danger">
</div>
</div>
<div class="col-6 bg-secondary " style="height: 100vh;">
</div>
</div>
</div>
don't forget to put height and width
///
Other and I think better way :
<div class="container-fluid">
<div class="row">
<aside class="col-2 px-0 fixed-top bg-danger">
</aside>
<main class="col offset-2 h-100">
</main>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm using bootstrap columns which allows a maximum of 12. I need two different divs in one row, one having 12 cols and the other 4. I need the one of 4 cols to appear on the one of 12. Means both of divs will be in the same row. Please how do I achieve this. Thanks.
First of all you can split main container to two columns, for example 50/50 and inside they you can put next columns.
<div class="container">
<div class="col-md-6>
<div class="col-md-3></div>
<div class="col-md-3></div>
<div class="col-md-3></div>
<div class="col-md-3></div>
</div>
<div class="col-md-6>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
<div class="col-md-1></div>
</div>
</div>
You can make it by following the below mentioned steps:
Go to Customize Bootstrap page.
Increase the value of #grid-columns variable from 12 to 16.
Compile and Download the modified css.
And then you will be able to use 16 columns in a row instead of 12 as shown below.
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-4"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I was wondering how can I add an iframe between the header and the footer of my webpage, I mean in the blank between the header and footer. I tried height 100% but it overrides the header! I am using the template from http://materializecss.com/templates/starter-template/preview.html. Can anyone help please? Thanks
Use CSS position and top to position the iFrame below the header.
Try using
position:absolute;
top:65px;
left:0px;
See here:
http://www.w3schools.com/cssref/pr_pos_top.asp
http://www.w3schools.com/css/css_positioning.asp
To add an iframe in HTML between the header and footer, you will place this code, but change the source to whatever you want to point it to.
<iframe src="http://www.unlocktheinbox.com"></iframe>
The width and height, if set to 100% is going to be confined to the parent elements on you form, which looks like one of your DIV's.
So on your example page, remove this code.
Replace this code with.
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
With
<iframe src="http://www.unlocktheinbox.com" width="100%" height="100%"></iframe>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i'm good in HTML CSS, but beginner in responsive design like Bootstrap 3.
So i need to know how to make the design on the image in Bootstrap.
It should be one row on descktop screens and two rows on smaller screens like portrait tablet and smartphones.
Thank you in advance.call-to-action image
Try this https://jsfiddle.net/aLgrte2g/
HTML
<div class="container">
<div class="row text-center box">
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-sm-6">
<p>Contact: Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
CSS
.box {
border: 1px solid black;
padding: 10px;
}
You could structure you HTML like the following:
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-6">
Request a list of the latest materials
</div>
<div class="col-md-12 col-sm-6">
Contact: info#lojalstik.mk +334
</div>
</div>
</div>
https://jsfiddle.net/DTcHh/14100/
Please take a look at the docs for a better understanding of the grid system: http://getbootstrap.com/css/#grid
I know how to solve this issue using CSS that overrides Bootstrap's compiled CSS, but it seems to me this alignment issue is such a common use case that I must have misunderstood how to use the Bootstrap framework. (First time with Bootstrap.)
Case: The columns in container B (JSFiddle) do not align with the content in container A, because Bootstrap generates a 15px left/right padding to each column.
<section class="container A">
<h1>About Us</h1>
<p>Lorem</p>
</section>
<section class="container B">
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
</section>
Question: Is there a way I can make the column content align to the container A content, by changing the HTML only, without using any CSS?
Setup: I'm required to use Twitter bootstrap 3.0.0 for the above.
OT: As you see this is my first post on SO, I'm grateful for any advice on how to improve this question and its markup.
Thanks!
Yes, you used two containers, I updated your fiddle with two rows instead and a div with class col-md-12 to take up the whole width of the screen in the first row, check it here : http://jsfiddle.net/3ELJH/3/