If you make the screen smaller (in width) the divs on the bottom (under 'My work') stack up on each other. I was wondering how to fix this?
See jsfiddle: https://jsfiddle.net/sxnmyjtk/
html:
<div class="tiles">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="servatius">
<p>Servatius</p>
</div>
</div>
<div class="col-md-3">
<div class="levy">
<p>Levy Consult</p>
</div>
</div>
<div class="col-md-3">
<div class="skinprove">
<p>Skinprove</p>
</div>
</div>
<div class="col-md-3">
<div class="mumc">
<p>MUMC+</p>
</div>
</div>
</div>
</div>
</div>
see jsfiddle for css
They are stacking on top of each other because you are using position absolute in your CSS. If you remove this they will then stack vertically when the width is reduced.
If you want the divs to remain side by side you can also consider using col-xs-3 instead of col-md-3.
You can add other bootstrap classes or CSS depending on what results you are tying to achieve when width is reduced.
Related
I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.
I couldn't find the details after searching.
The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.
<div class="row">
<div class="col-lg-4">
SIDEBAR
</div>
<div class="col-lg-8">
<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>
</div>
</div>
I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-4">Column</div>
<div class="col-lg-3 col-xl-4">Column</div>
</div>
</div>
Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/
If this is not what you need, please try to be more clear about your goal.
I have some html code that has some elements in rows:
<div class = "row">
<div class="col-sm-3 cont-box">
<h1>Title1<h1>
</div>
<div class="col-sm9 cont-box">
<img src="onepic.jpeg" class="img-responsive" alt="dum1">
</div>
</div>
When I add margins to the class cont-boxmy browser displays the two elements underneath each other, a line break is added. I would like them to be next to each other, what am I missing?
I am completely new to CSS and html, so any help is much appreciated.
When you add a margin to bootstrap grid that time when its width reaches above the 12 column grid that time it automatically pushes to down.
To do this add div inside the col-sm-3 and col-sm-9 and add margin to it.
<div class = "row">
<div class="col-sm-3">
<div class="cont-box">
<h1>Title1<h1>
</div>
</div>
<div class="col-sm-9">
<div class="cont-box">
<img src="onepic.jpeg" class="img-responsive" alt="dum1">
</div>
</div>
</div>
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
For mobile I'd like the div NAV to be moved to the very top.
Desktop:
CONTENT | TEASER
................. | NAV
Mobile:
NAV
CONTENT
TEASER
I've already reversed the layout, i.e. I set it up the way it is supposed to be for mobile (below 992px) and use the push/pull classes to push the NAV div to the bottom right for desktop viewports. Unfortunately so far it doesn't quite work yet.
Any help would be greatly appreciated.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8"> NAVI </div>
<div class="col-md-8 col-md-pull-4 left" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8"> TEASER </div>
</div>
http://jsfiddle.net/aws9pv88/1/
I found the solution. Basically the HTML Markup is already correct.
All we need to do is position the Nav Layer absolute, give it a left and a margin-left, as well as defin a width, and give the Teaser div a margin-bottom.
See here: http://jsfiddle.net/aws9pv88/9/
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 nav"> NAVI </div>
<div class="col-md-8 col-md-pull-4" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8 teaser"> TEASER </div>
<div style="clear:left"></div>
</div>
This is a solution made up of bootsrap + absolute positioning.
If however somone find a bootstrap only solution, feel free to post it here.
Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)