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 4 years ago.
Improve this question
Does anyone know how to do this type of grid style in bootstrap 4?
Thanks in advance.
Bootstrap can't provide that gird system. which you currently want.
create custom gird system for that , sharing one example with you
Click here
Bootstrap provides a way to span rows in columns but it does not provide a way to span columns in rows that is to say you cannot span a column on multiple rows . Its not possible in grid system. you have to use custom html and css for it .
Try this
<div class="container">
<div class="row">
<div class="col-xl-4">1</div>
<div class="col-xl-8">
<div class="row">
<div class="col-xl-8">2</div>
<div class="col-xl-4">3</div>
</div>
<div class="row">
<div class="col-xl-4">4</div>
<div class="col-xl-8">5</div>
</div>
</div>
</div>
</div>
Related
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 5 years ago.
Improve this question
I love these following portfolios:
http://www.ericryananderson.com/
http://jeremycowart.com/portfolio/featured/
I wanted to create a website with the same concept of a collage of photos connecting together. But I am not sure the best way to approach this, would I just use box-sizing and floats? Or would bootstrap make this project easier? Thank you for your help!
Edit: I was told in order to do this, photoshop would be the best method, but I would like to complete this with just programming if possible.
I don't think it's possible to achieve this with purely CSS, correct me if I am wrong.
For that kind of thing I usually use isotope (http://isotope.metafizzy.co/), it has a setting called "masonry" that absolutely positions the images like that. The http://jeremycowart.com/ one you linked up there also uses isotope.
If you wanted to go strictly with CSS all I could think of would be setting four columns and then stacking the images inside. Kind of like this https://jsfiddle.net/x74rbraa/
<div class="container">
<div class="col">
<div class="box box--portrait">
</div>
<div class="box box--portrait">
</div>
<div class="box box--landscape">
</div>
</div>
<div class="col">
<div class="box box--landscape">
</div>
<div class="box box--portrait">
</div>
<div class="box box--landscape">
</div>
</div>
That wouldn't be very mobile friendly, though. And you'd have to do the sorting/ordering in the code that generates your columns. For example iterate over all entries you want to show, save them in an array, split the array in multiple smaller arrays and put their contents in one col each.
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 would like to know the best way of using HTML5 and div tags together. I have posted my html below.
I am using the article tag then I have sections which I am sure are correct, but I am using grids as well, so where should I put the grid div?
Is my method the best way of doing it?
<article>
<div class="grid-wrapper">
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col grid-last">
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</div>
</section>
</div>
</article>
According to HTML5Doctor, the way you've gone about it is fine. You're effectively using the divs as wrappers and that's permitted.
Source: http://html5doctor.com/you-can-still-use-div/
Since you are using a grid system, and a section element sections off content, you want the section to be inside the grid, which is defined by the div. So put the section element inside the div. Otherwise, your grid is relative to the section and not the whole page and grid system.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
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.
Improve this question
Building a site in firefox now that displays three items aligned next to one another.
Each div is col-xs-6 col-sm-4 col-md-4 respectively but Firefox is breaking the row into two lines where as Chrome isn't.
Current version of Firefox. Not sure what the hell is going on. So any help would be appreciated.
Firefox
Chrome
Code
Note that page-main is just a wrapper.
<div class="page-main">
<div class="container">
<div class="row center">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>
</div>
I tried it and it works...
Try this link...
http://jsfiddle.net/52VtD/7366/embedded/result/
SO says I need to post code with jsfiddle links, so ignore this..
System.Console.WriteLine("Happy now?!");
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 9 years ago.
Improve this question
Am currently designing a website using bootstrap and so far I have come up with a very nice website that is supposed to respond but it doesn't when scaled down. I want the website to respond to the following screen sizes: 768x1024, 800x1280, 980x1280,1280x600 and yet I've read bootstraps docs of responsivenness and tried them but nothing has changed.
I created my own classes inside a getbootsrap template and even when I tried to put them inside;
<div class="col-md-4"><div class="andy-redbackground"</div>
</div>
even tried to get into the classes and insert:
background-size:cover;
but nothing worked out.
Try this code:-
<div class="row">
<div class="col-xs-4">
<div class="andy-redbackground"></div>
</div>
</div>
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 9 years ago.
Improve this question
Am trying to decide the best way to markup this design I'm working on. The quick outline of it is here:
It's a news article.. so I'd like to use the article tag and then some aside information. My issue is the design layout of it.. the h1 of the article spans over the 2 columns.. I want to use article tag for the h1, publish information and main body.. but in order to do that and fit the design I'd have to include the rightcolumn inside the article which is not great semantically. The information in the right column is common to lots of pages so shouldn't be part of an aside.
So at the moment I'm thinking along the lines of
<h1>News article title</h1>
<div class="leftcol">
<article>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
I'm concerned about leaving the H1 outside the article tag - Seems like it kind of defeats the purpose, but I'm not sure what other way would work. Possible repeat of the h1 tag inside the article as well but that's definitely not ideal..
What is the most semantically correct way of marking this design up?
*ED
Can't do opinion based questions.. but in case anyone else is considering the same thing (and not allowed to ask it) I went with the following:
<div class="page-heading">News article title</div>
<div class="leftcol">
<article>
<h1>News article title</h1>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
Decided to keep the h1 within the article (and hide it with css) and then just use a div outside the columns with the same content to hold true to the design.