In bootstrap I have used this
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-2">
Item 1
</div>
<div class="col-xs-12 col-md-4 col-lg-2">
Item 2
</div>
<div class="col-xs-12 col-md-4 col-lg-2">
Item 3
</div>
</div>
and thats it. I can create a very responsive 3 column row.
How about in WooCommerce WordPress? all I made is this.
<p class="form-row">
<div class="u-column2 col2-set">
<div class="u-column1 col-1">
</div>
</div>
<div class="u-column2 col2-set">
<div class="u-column1 col-1">
</div>
</div>
</p>
Is there any way to handle this kind of class? Can I make same as in bootstrap? If no what is the bootstrap equivalent in WooCommerce?
Your objective is to use Bootstrap CSS styling functions.
What I would recommend is copying the following lines of code : https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
to a new .css file,say you name it bootstrap-copy.css. And then finally, use wp_enqueue_style (
https://developer.wordpress.org/reference/functions/wp_enqueue_style/ ) to add bootstrap-copy.css and then use the bootstrap classes with ease.
Related
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
I'm used to work with Bootstrap and for me the grid system is very clear in my head. Now, I'm trying to use the Angular Flex Layout and, even reading the documentation, I'm not understanding how exactly to use it.
For instance, I have the following code using Bootstrap 4:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
</div>
</div>
How could I write the same code using Angular Flex Layout??
In angular-flex-layout we don't have a grid so you would have to approach it this way to achieve same result as using bootstrap grid system:
<div fxLayout="row wrap"
fxLayout.sm="column" >
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:red">
first-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:blue">
second-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:yellow">
third-section
</div>
</div>
do mind that responsive break points could be different.
I'm trying to display some objects in 3 columns using Bootstrap 4. When using this code it only appears in 1 column, like this: web 1 column.
But my idea is to be displayed like this (more or less): web template 3 columns.
<div class="row-mt-5">
<div ng-repeat="woman in women">
<div class= "col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
I want to learn to use Bootstrap classes for object positioning.
First you need to know about the basic layout structure, learn it here, Please note that you need to define the grid layout for all the screens (sm md lg xl) the details are found in the link provided. Please refer to the below fiddle the code fix for your issue. I have included the ng-app and ng-controller for testing purposes, please ignore that.
HTML:
<div class="container-fluid" ng-app="myApp" ng-controller="MyController">
<div class="row">
<div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text">
<h5>{{woman.field}}{{woman.job}}</h5>
</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
JSFiddle: here
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.
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