I am using bootstrap. I m having header and footer, in between that I want to show side bar on left side. I am new to bootstrap and angular js. please guide me how I can build this type of structure.
Try this....
<div class="container">
<div class="row">
<div class="col-md-4">
Sidebar
</div>
<div class="col-md-8">
text
</div>
</div>
</div>
Also learn basic Boostrap: http://getbootstrap.com/
I don't really understand your problem there Priyanka kakade.
If you want a navbar on the left of your content, you can use this kind of structure between header and footer :
Example :
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-md-2">
<!-- navigation -->
</div>
<div class="col-xs-8 col-md-10">
<!-- content of the page -->
</div>
</div>
</div>
I recommend you use xs (mobile display) and md (desktop display) classes together, otherwise your navigation would be too little on mobile devices, or too big on computers.
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.
Am beginner in coding. I have designed a landing page. The landing page looks fine in website but divisions are overlapping in mobile. Kindly check and advice how to resolve this problem?
Landing Page Link
Thanks in advance
You have an inline height of 3px on your ul id="grids".
Remove that or set it to auto and its should stack properly.
you are using bootstrap the columns must wrap with row class and row should be warped in container or container-fluid classses
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
OR
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
</div>
change bootstrap nav use this one [http://getbootstrap.com/examples/navbar/ ] it's batter to responsive and mobile devices .
I have a page where container-fluid is the main div and then nav comes. After nav I have section where views loading in with row wrapping up content which is divided in columns or offsetted. But When I use a row class either on section or the div after , it is creating a gap between nav and page. Mainly adding it to container. But that is why we should be using container. And row is for columns so why still the gap?
<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>
Use default bootstrap's nav, you can copy the code from W3C.
Then make your structure correctly like, for example:
<nav> </nav>
<section class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</section>
Check that there are different container types. div, nav, aside, section, footer, etc are containers by default. It's ok and awesome to use bootstrap, but we have to remember the default atributes of HTML tags before aply bootstrap.
Try with the default bootstrap's fixed nav.
I made an example of portfolio using it, you can check and inspect here:
portfolio example
it's very clean concerning js (only one jQ function if i dont remember wrong) and there's only a bit of handmaded css.
I'm just starting on bootstrap and trying to understand how the grid works exactly
HTML:
<div class="row">
<div class="leftContainer col-md-6">
A
</div>
<div class="rightContainer col-md-6">
B
</div>
</div>
CSS:
.leftcontainer{
float:left;
}
.rightcontainer{
float:right;
}
I don't want scroll bar at the bottom on the mobile devices. My output is of this format on mobile
A
B
Instead I want
A
B
but A B on desktop
Any help is much appreciated. Thanks!
<div class="row">
<div class="leftContainer col-xs-12 col-md-6">
A
</div>
<div class="rightContainer col-xs-12 col-md-6">
B
</div>
</div>
and remove your CSS. You don't need to add the floats to any of this.
Also, please read up on the grid system in the Bootstrap documentation. It has whatever you need. http://getbootstrap.com/css/#grid
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!