I'm trying to create a layout like this:
http://jsfiddle.net/LLbnhb9v/
Basically, A and C are sidebar items, and B is the main content:
My markup is as follows:
<div class="container">
<div class="col-sm-2">
A
</div>
<div class="col-sm-8">
B
</div>
<div class="col-sm-2">
C
</div>
</div>
This works for the mobile, but on the desktop C is positioned below B. How can I make B (the main content) "span" across multiple rows without any insane css tricks?
You need to have the pink section have the pull-right class and the green section to have a clearfix class.
http://jsfiddle.net/LLbnhb9v/19/
<div class="container">
<div class="col-sm-2">
<div class="x a">
short<br>text
</div>
</div>
<div class="col-sm-10 pull-right">
<div class="x b">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="x c">
short<br>text
<div>
</div>
</div>
I also changed the layout a little bit. The first level of divs should only worry about layout. If you add padding and margins and stuff then they can have some issues and not work as expected. I moved the a b c and x classes onto sub elements.
Related
I have got a React function in a component in which I use Grid in order to sort out my images and text.
This is my code:
function HomePageDescr() {
return (
<div className="hp-descr-container">
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-12 mx-8">
<img
className="img-php col-span-2 md:row-span-3object-cover w-600 h-600"
src={housePic4}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="mt-6 text-2xl font-bold text-darkerGreen col-span-2">
What is the Personal House Shopper?
</h1>
</Zoom>
<p className="md:row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-8 mx-8 ">
<img
className="pt-6 text-2xl font-bold text-darkerGreen md:row-span-1 col-span-2"
src={housePic1}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="pt-6 text-2xl font-bold text-darkerGreen row-span-1 col-span-2">
Where are we based?
</h1>
</Zoom>
<p className="row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
</div>
);
}function HomePageDescr() {
return (
<div className="hp-descr-container">
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-12 mx-8">
<img
className="img-php col-span-2 md:row-span-3object-cover w-600 h-600"
src={housePic4}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="mt-6 text-2xl font-bold text-darkerGreen col-span-2">
What is the Personal House Shopper?
</h1>
</Zoom>
<p className="md:row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-8 mx-8 ">
<img
className="pt-6 text-2xl font-bold text-darkerGreen md:row-span-1 col-span-2"
src={housePic1}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="pt-6 text-2xl font-bold text-darkerGreen row-span-1 col-span-2">
Where are we based?
</h1>
</Zoom>
<p className="row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
</div>
);
}
I would like the gap to be removed between elements, if you see in responsive this is the result with Tailwind:
I am new to Grid so any help figuring out how to remove the space in the grids is welcome :)
Remove any manual added margins and paddings (for example your h1 has an mt-6 class) and instead add the desired grid-gap class to the grid div itself see https://tailwindcss.com/docs/gap for different class options
I am building a page with fixed Navigation bar and Footer (for log information). Both the content and the Footer can scroll if needed. Thanks to some thinkering and all who answered my previous question I managed to create the code at the end of the question (with Bootstrap 4 and jQuery).
The problem I see is that the footer still shrinks if I resize the textarea by hand. I'd expect to see a scrollbar appear on the main content, but not the footer to shrink.
I've also added a couple of lines on the main content and noticed that it overflows (the text goes out the beige part. If I resize the textarea it goes back inside (that is, the text has the beige background again).
What am I doing wrong?
JFiddle here: Fiddle
See previous question here:enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
footer {
background: lightgreen;
height: 100px;
}
textarea {
height: calc(100% - 147px);
}
</style>
</head>
<body>
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-0 bg-primary">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item dropdown-item-template" href="/">Editor</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col">
<div class="row h-100">
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
<div class="row">
Execute external commands:<br />
<button id="testbtn" class="btn btn-primary">TEST</button>
<button id="btnclear" class="btn btn-primary">Clear Console</button>
</div>
<div class="row flex-grow-1" style="background-color: beige;">
<textarea class="w-100">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
ratione laboriosam?</textarea>
ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />
</div>
</div>
<div class="col-2">
<div class="row">
<li>
<ul>aa</ul>>
<ul>aa</ul>>
</li>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid overflow-auto">
<div class="row">
<div id="data" class="col p-1">test<br/>to<br/> fill<br/> the<br/> console<br/> log<br/></div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"
integrity="sha512-8vfyGnaOX2EeMypNMptU+MwwK206Jk1I/tMQV4NkhOz+W8glENoMhGyU6n/6VgQUhQcJH8NqQgHhMtZjJJBv3A=="
crossorigin="anonymous"></script>
</body>
</html>
If you resize one flex element, the others also resizes. To prevent resizing the footer add the classes "flex-shrink-0" and "flex-grow-0" and set the flex-basis of the footer to 100px.
<footer class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
footer {
background: lightgreen;
height: 100px;
flex-basis: 100px;
}
to make the overflowing part beige you can replace
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
and
<div class="row flex-grow-1" style="background-color: beige;">
with
<div class="col-10 d-flex flex-column" style="background-color: bisque; position: absolute;">
and
<div class="row flex-grow-1" style="background-color: beige; position: relative;">
footer {
background: lightgreen;
min-height: 4rem;
max-height: 4rem;
}
it will work fine :)
I'm starting to get really lost in the whole Bootstrap/flexbox grid system. I'm trying to achieve a dynamic, 2 column layout with one large col-sm-12.col-md-12.col-lg-8 and two small columns of: col-sm-12.col-md-6.col-lg-4
This is what I want for large screens:
and this for medium-sized screens:
But, this is what I get!:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" initial-scale="1">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-sm-12 col-md-12 col-lg-8">
<p> Lots of text </p>
</div>
<div id="small1" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
<div id="small2" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
This seems like an ideal opportunity for a nested grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
In the above example your primary grid has two columns; the first is 12-columns wide at all breakpoints below lg. At lg it is 8-columns wide. The second column follows the same pattern but at lg it is 4-columns wide.
Inside the second column we have the nested grid. This has a different breakpoint for each column: 6-columns wide for breakpoints below lg and at lg each column is 12-columns wide.
You can use the following solution:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p><b>1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-12 col-md-6 col-lg-12">
<p><b>2</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-12 col-md-6 col-lg-12">
<p><b>3</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
What is happening for different devices?
small view (like iPhone 6):
All columns have the same full width (col-12) of the device. I don't recommend to create two columns for column number 2 and 3.
medium view (like iPad):
The first column is full width (col-12) and above the columns 2 and 3. The columns 2 and 3 are in one row with same width (col-6), next to each other.
large view (like Desktop / Laptop):
The column 1 is using 2/3 of the width. The columns 2 and 3 are on the right column (1/3 of width), about each other.
To check the different breakpoints I recommend the browser plugin (Google Chrome) Window Resizer or the device toolbar on Google Chrome (Ctrl + Shift + M on developer tools F12).
<div class="mdc-card problem">
<section class="mdc-card__primary">
<h1 class="mdc-card__title mdc-card__title--large">title here</h1>
<h2 class="mdc-card__subtitle">subtitle here</h2>
</section>
<section class="mdc-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam nostrum nisi optio iusto excepturi sequi itaque. Vitae laudantium fugiat, id eius voluptates placeat labore magnam est saepe sapiente et molestias quaerat numquam excepturi illum dolores quam error, eaque rerum ea vero ipsum sequi. Sapiente adipisci reiciendis quod officia aliquam quidem praesentium cupiditate facere, magni nemo, asperiores, reprehenderit eveniet corporis eligendi et. Numquam voluptatem, consectetur. A harum quas, veritatis blanditiis, officia impedit voluptas laborum itaque delectus dolore explicabo aut, culpa iste sapiente repellat voluptate voluptates commodi dignissimos similique repudiandae. Nulla expedita atque dolore alias, facilis ipsam qui doloribus, iure quo animi.
</section>
<section class="mdc-card__actions">
<button class="mdc-button mdc-button--compact mdc-card__action">action 1</button>
<button class="mdc-button mdc-button--compact mdc-card__action">action 2</button>
</section>
</div>
.problem {
height: 350px;
width: 350px;
}
demo - the demo first row is full width no issues, the problem with second row with large supporting text, and third one with small supporting text
mdc-card - docs
how to deal with the width and height of the cards.
what the best way to handle this kind of issues
add only width demo
or
if all cards what to be in same height - add height, overflow: hidden; to mdc-card__supporting-text class demo
as of now ended like this
im new in this community, and a very newbie coder.
I want to set a space between this two columns, I tried a few codes but didn't work...
This is what I did:
<div class="container">
<div class="main row">
<div class="col-md-3">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
</p>
</div>
</div>
<div class="col-md-9">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
</div>
</div>
And i got this:
http://i.imgur.com/0dhqCZO.png
How I can set a space of X pixels between? :S
And another question to not make another post:
How I can set the 2 columns the same height? ( I know its a awesome newbie question haha )
First of all, actually there is a space between this two columns (30px due to Bootstrap padding included in col- classes. You don't see this 30px gap because you set background to col- classes. In order to see it you have to have another div inside col- class.
CODEPEN EXAMPLE
Secondly, read about grid system in Bootstrap, you can't have col-md-12 directly after col-md-3 (you have to use another row if you want to nest columns in another column).
You can change the gap by changing col- classes padding. Default for Bootstrap is 15px on each side. For example:
.col-md-3,
.col-md-9 {
padding-left: 60px;
padding-right: 60px;
}
CODEPEN EXAMPLE
Columns of the same height, the easiest example is this:
.column-1,
.column-2 {
height: 300px;
}
CODEPEN EXAMPLE
Use CSS's margin.
<div class="container">
<div class="main row">
<div class="col-md-3" style="margin: 10px">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
</p>
</div>
</div>
<div class="col-md-9" style="margin: 10px">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
</div>
</div>
Of course, change 10px to however many pixels you want.
Since we are using margin which affects all borders, 10px is half the amount of space that will be between the columns.
You can use margin-right: 10px on the first instead, if you want exactly 10px space between the columns, and no extra margin around them.
margin: Defines the margin around all borders of the object
margin-top: Defines the margin at the top border
margin-bottom: Defines the margin at the bottomborder
margin-right: Defines the margin at the right border
margin-left: Defines the margin at the left border
You should use bootstrap gutter for the separate columns. You will find good example and some information about it here
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/
And you can use .row-eq-height to get the col-height equal.
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="row row-eq-height"></div>
Full information is available here.
http://getbootstrap.com.vn/examples/equal-height-columns/#
If width of content boxes is not a problem you can use col-md-offset-* where * can be 1,2,..,12 as per your choice.
<div class="col-md-offset-1 col-md-8">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
For setting two columns to the same height you can set min-height css to some predefined length.