I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation
Related
I understand with single class instances how toggleClass works, for example
<div class="col-md-9" id="content></div>
$(#content").toggleClass("col-md-12 col-md-9");
This will toggle 12 columns and 9 columns. However, what if I set my class as such?:
<div class="col-sm-10 col-md-9" id="content"></div>
I can't find an example of toggling multiple classes for one element if I'm working with multiple breakpoints. Any clues?
Given your element:
<div class="col-sm-10 col-md-9" id="content"></div>
If you run
$("#content").toggleClass("col-sm-10 col-md-9 col-sm-6 col-md-3");
This will output the following, on the first call
<div class="col-sm-6 col-md-3" id="content"></div>
Then if you ran the toggle function call again, it would revert it back to
<div class="col-sm-10 col-md-9" id="content"></div>
Given your comment response, you would probably need two toggleClass calls
For the sidebar, you could toggle the larger column sizes, replacing them with smaller ones
The content area, you could toggle the column sizes to be larger, given that you made the sidebar smaller. Hypothetical example below.
To toggle the sidebar, you could run the following two toggleClass functions to "toggle" the sidebar.
$("#sidebar").toggleClass("col-sm-6 col-md-4 col-sm-3 col-md-2"); // Make sidebar 1/2 the size (width)
$("#content").toggleClass("col-sm-6 col-md-8 col-sm-9 col-md-10"); // Enlarge the content area
Untested code, but we're simply toggling between the two sets of dimensions for both elements here.
What the above snippet does is scale the sidebar smaller, rather than collapse, this is handy if your "collapse" button resides within your sidebar. If it doesn't then you could of course alter the column sizes to have the sidebar not be there at all.
This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/
I'm using bootstrap grid system for building a website, i'm not using the row class but the padding between divs is not working!
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
Can anyone help me with that?
In Bootstrap there are 12 columns in a row. You have 4 * 4 = 16, and that's not correct.
It’s based on a 12 column layout and has multiple tiers, one for each media query range.
So you should change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
See docs here.
To start with - assuming you are wanting a single row- you need to either change these divs to a "3" each or have one less of them - remember that 12 is the magic number for the Bootstrap grid.
Also the reason for containing the cols in a .row is to control the margin on either side. The padding is INSIDE the divs - not between them so the following will give you a row with 3 divs that are positioned adjacent to each other to give a full row and will have left / right padding of 15px inside each div:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
The .row class has a -15px margin on either side so that each of the side divs will aligns with the edge of the parent container div. Remember that you can use container-fluid to expand the parent div across the entire viewport.
So to summarise - the Bootstrap .col-* divs do NOT have padding between them, but rather padding inside them. Unless of course your CSS overrides that.
According to Bootstrap documentation:
Row is mandatory
Every row has 12 columns
You are using 16 columns, change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I am currently learning Bootstrap. I came across a piece of code where I was trying to create a bunch of rows to create a kind of table. But when I ran the code on the browser, the margins of the rows start of behind the screen. Look at the very simple piece of 'Hello World' code below in JS Fiddle.
<div class="row">Hello World!</div>
http://jsfiddle.net/x8y50sas/
Why is the text starting from behind the margins? An detailed explanation could help?
You need to include a cell inside the row:
<div class="container">
<div class="row">
<div class="col-xs-12">Hello World!</div>
</div>
</div>
The reason for the offset is that rows in bootstrap have a negative margin. They should always contain a cell which adds additional padding.
More info in the docs: http://getbootstrap.com/css/#grid
Because to be able to use the grid system you need to wrap your element inside class container. Read this article: http://getbootstrap.com/css/#overview-container
Example:
<div class="container">
<div class="row">Hello World!</div>
</div>
You must enclose the block "row" in the block "container" as:
<div class="container">
<div class="row">
<!-- Example: 3 Cell -->
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.