I have a WordPress website which uses the Cherry Framework 4 and I wonder how this theme works.
In the footer I see this:
<footer id="footer" class="site-footer wide" role="contentinfo">
<div id="static-area-footer-top" class="footer-top static-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 static-footer-menu"></div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 static-footer-logo"></div>
</div>
</div>
</div>
<div id="static-area-footer-bottom" class="footer-bottom static-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 static-footer-info"></div>
</div>
</div>
</div>
</footer>
How can I change the settings, so that col-sm-5 col-md-5 col-lg-5 is changed? I want to have it centered all of the width with col-xs-12?
Anybody knows that?
Thanks!
Create child theme to modify footer.
Here is link to create child theme.after that just copy footer.php from parent theme to child theme.
Related
I create a price table include 3 columns.
My code like:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
</div>
</div>
Using col-xx-4 is work perfect. Only at col-sm-4, my page is broken. Like:
I decide using col-sm-6, it shows like:
Look good. But at the final item, it should be at center screen and margin-top: 15px to look pretty.
I don't know how to do it. Have any method to resolve my problem?
Try use offset
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-3">
</div>
</div>
</div>
The problem with Bootstrap's columns is that you can't make the columns equal in height. I recommend you use flex for this.
how can I center my main container horizontally, using excising bootstrap classes
here is the container:
<div class="container-fluid main-container">
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
The way it looks now
Here you go with a solution https://jsfiddle.net/w4gLtcz5/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-container">
<div class="row">
<div class="col-md-offset-1 col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
In bootstrap, by default there is 12 columns.
Since your container is occupying 10 columns out of 12, so started your container from 2 column instead of column 1. So that in both the side of the container you will have equal space.
I considered col-md-10 is your number of columns
I have added col-md-offset-1.
Please use col-xs-offset-x
Instead of x you can write number between 1 to 12.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns:
Your code will be.
<div class="container-fluid main-container">
<div class="col-md-10 content col-xs-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
Reference link https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
I'm obviously missing something very obvious here but I want a 10px gutter between the bootstrap columns. Coming from ui-kit which has gutters by default, to turn them off you simple add the class uk-grid-collapse.
What is the bootstrap equivalent for turning gutters on?
http://codepen.io/anon/pen/vKBjBa
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col1">
<div class="div-content">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col2">
<div class="div-content">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col3">
<div class="div-content">col 3</div>
</div>
</div>
Just define the colors to inner div. Here i have remove classes from parents and passed the classes to child div's
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="div-content col1">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="div-content col2">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="div-content col3">col 3</div>
</div>
</div>
Because bootstrap has a default gutter space in col- classes so use them and define background-color to inner div's.
The default gutter space is 15px from each side left and right so you will see the default space of 30px between the div's. If you want to change that space to 10px just write you own css with desired space and overwrite it.
You can do it using bootstrap class container-fluid , Please update your HTML with following :-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="container-fluid col1">
<div class="div-content">col 1</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="container-fluid col2">
<div class="div-content">col 2</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="container-fluid col3">
<div class="div-content">col 3</div>
</div>
</div>
</div>
It may help you.
If you want a custom gutter width of 10px, you can do that by customizing the bootstrap with your value by using http://getbootstrap.com/customize/ or you can make your own custom class to overide it
If you want to completely remove the gutter, Bootstrap 3 introduced row-no-gutters in v3.4.0:
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
How I can order xs size blocks?
I have this code:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
MAIN
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
SIDEBAR
</div>
</div>
</div>
What I want is to get SIDEBAR block on top page when resizing page to xs size.
Thank you!
Try col-*-push-* and col-*-pull-*. push will move the container left and pull will move the container right.
So in your example:
<div class="col-sm-4 col-sm-push-8 col-xs-12">
SIDEBAR
</div>
<div class="col-sm-8 col-sm-pull-4 col-xs-12">
MAIN
</div>
That should do the trick.
Also note that I excluded the lg and md classes. Bootstrap automatically uses the largest available class for larger screens. So if you don't specify lg and md but do specify sm, it will use the sm for medium and large.
Here's a fiddle.
Use col-xs-12
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">
MAIN
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
SIDEBAR
</div>
</div>
</div>