So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
Related
I'm having some problems of respecting the grid of bootstrap 4. I have a content of col-sm-9 and a right sidebar of col-sm-3 float-right. But the sidebar does not start from the top, but start just after the end of col-sm-9. I would like to align both the column.
Here is how the page it is looking:
Here you can inspect the code of the page: Code
This is basically my html:
<section class="row clearfix" ng-cloak>
<div class="content-top no-gutters">
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image">
</div>
<div class="content-featured-image">
<img>
</div>
</div>
<div class="clearfix"></div>
<div class="gs-track col-sm-9"><!--start player-->
<!---player--->
</div><!-- close player -->
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content-->
<!--content->
</div><!-- close content -->
<div class="col-sm-3 float-right pt-3"><!-- start sidebar -->
<!-- sidebar -->
</div><!-- close sidebar -->
</section>
I was able to align the sidebar to the content but I had to move the sidebar box before the player, and I don't want to have this behaviour.
It was difficult working with your supplied link since when I tried to run the HTML I would not get the same content. But upon manually putting in my own content and trying to recreated I found that using bootstraps ROW on a container div worked.
<div class="row">
<div class="col-sm-9">CONTENT</div>
<div class="col-sm-3">SIDEBAR</div>
</div>
Try it and let me know if it works.
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>
I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!
In this layout, I want to place a circle (with fixed size) at the intersection of the column and a line on the bottom left corner of the page (which should be a no scroll page). The circle should look like this image.
I’ve started doing it with the flexbox property, however this was the first time I used this property and I am not getting how to do this.
Does anyone know how can I do it?
<div class="wrap">
<div class="hud1">
<div class="gps box"></div><!-- /gps -->
<div class="info box"></div><!-- /info -->
<div class="phone box"></div><!-- /phone -->
</div><!-- /hud1 -->
<div class="speed">
<div class="circle"></div>
</div>
<div class="hud2">
<div class="status box withfocus">
<h1>Estado</h1>
</div><!-- /status -->
<div class="media box withoutfocus">
<h1>Multimédia</h1>
</div><!-- /media -->
<div class="environment box withoutfocus">
<h1>Ambiente</h1>
</div><!-- /environment -->
<div class="settings box withoutfocus">
<h1>Definições</h1>
</div><!-- /settings -->
</div><!-- /hud2 -->
</div><!-- /wrap -->
Here’s the code:
http://jsfiddle.net/marisaroque/mR7nq/
EDIT:
Here’s the image:
Link
Thank you in advance!
Is it like this: http://jsfiddle.net/HUmLb/embedded/result/ ?
The key is making .hud1 a one-column flex, and in the last item inserting a .hud2 row.
I still couldn't make it center vertical, but I presume it's a good start.
Let us know.
Edit
http://jsfiddle.net/ngxyW/
I put an empty box in the lower corner and fixed the wrap div to bottom left.
This is a great reading about flex display: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am looking into a future project and I want to build it with bootstrap. I want it to be a boxed ( non-fluid ) layout limited to 1170px ... [actually on a side note I'm currently working with bootstrap V2 because I haven't looked properly at V3 yet but eventually I will work out the same or similar thing out in V3].
So what I need is to have full width panels ( these are quite popular lately in "flat design") with constrained content. That is ... all the content would be limited to a max width of 1170px but the backgrounds would be spanning the full width of the browser.
So I know this markup works but a) is it OK to have nested "container" divs like i've done and b) I haven't seen this technique before ... is there any better way (more standard way) that I might be missing ... and I appreciate that it may be better to start with version 3 but I would rather work this out in V2 first for my old projects if for nothing else
<div class="container-fluid" >
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="row" style="background:#666">
<div class="span12"><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="row" style="background:yellow">
<div class="container" >
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
I found a premium bootstrap marketplace and analyzed some of the themes on there. It looks like something along these lines is a better model.
<div class="my-own-wrapper" > <!-- eg 100% width to wrap entire site -->
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="whatever" style="background:#666"> <!-- non bootrap div 100% width -->
<div><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="whatever" style="background:yellow">
<div class="container" > <!-- wrapping bootstrap scaffolding in display div -->
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
Obviously it might be better to use some html5 elements too.