I am trying to make the footer of my website. I want to change the style.
1) Can I create a custom stylesheet and include it into the footer file?
If yes, Do I need to create a new div for any element I want to choose or can use the class provide by Bootstrap?
For example, above I created a div and than in the style file I added #mydiv?
Or there is a better solution?
<div id="mydiv">
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/footer_logo.png"></div>
</div>
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/ico.png"></div>
</div>
<div class="row">
<div class="col-md-4">
xx
xxx
xxx
xxx[enter image description here][1]
</div>
</div>
<div class="row">
<div class="col-md-4">2004-2017. All
rights reserved.</div>
</div>
</footer>
</div>
In addition to Bootstrap classes you can apply your own like
<footer class="container-fluid my-custom-class" style="margin-top: 30px;">
Then just select this class in CSS and apply the styling you need. Be careful, as some attributes (like width ) can be overwritten by Bootstrap.
Hope this helps.
Related
i just want to put the name of the slider image inside foreach loop and all of it is inside css "backgound:image:url()" i want to write the php code inside background-image like css
background-image: url({{url('sliderimages/'.$slider->slider)}});
it dosn't display images
i when i am using asset it didn't work i don't know why please help
here is my foreach blade code
<div class="col-xs-12 col-sm-12 col-md-9 homebanner-holder">
<!-- ========================================== SECTION – HERO ========================================= -->
#foreach ($sliders as $slider)
<div id="hero">
<div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">
<div class="item" style="background-image: url(asset('sliderimages/'$slider->slider));">
<div class="container-fluid">
<div class="caption bg-color vertical-center text-left">
<div class="slider-header fadeInDown-1">{{$slider->title}}</div>
<div class="big-text fadeInDown-1"> New Collections </div>
<div class="excerpt fadeInDown-2 hidden-xs"> <span>{{$slider->description}}</span> </div>
<div class="button-holder fadeInDown-3"> Shop Now </div>
</div>
<!-- /.caption -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.item -->
#endforeach
<!-- /.item -->
</div>
<!-- /.owl-carousel -->
</div>
If it's in public styles folder:
background-image: url("{{ asset('sliderimages/'.$slider->slider) }}");
in other pathes:
background-image: url("{{url('sliderimages/'.$slider->slider)}}");
I am generating html code using php. I have some information stored in an array called $persons and I'm trying to generate a bootstrap card for each $person:
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="card col-md-3 m-1">
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Everything works fine when I remove m-1 class, but as soon as I add m-1 class, margin causes the last div to go to next line. I think lack of space causes this problem. How can I fix this problem? How to have margin between divs without the last div going to the next line?
You should have a separate div for the card since it's display:flex. Also, just use my-1 for margin-top and margin-bottom so that x-axis space is not effected...
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="col-md-3 my-1">
<div class="card">
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
https://www.codeply.com/go/78AmkbWrLi
The easiest solution would be to just put another div inside the col, which applies the margin:
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="card col-md-3">
<div class="m-1"> <!-- NEW -->
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Or if you don't want to add another div, just add the m-1 class to the card-block.
**this is my home page ** i am showing data coming from mysql to card but is have same tag color i.e class="tag tag-pill tag-danger"
i am using ng-class={{hos.class}} /*class is a coloumn in table */
<div class="col-md-5" ng-repeat="hos in ho">
<div class="col-md-6">
<div class="card"> <img class="img-fluid" ng-src="{{hos.img}}" alt="">
<div class="card-img-overlay"> <span ng-class=" ">{{hos.tag}}</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small">{{hos.topic}}</h2>
</div>
<p class="card-text"><small class="text-time"><em>{{hos.time}}</em></small></p>
</div>
</div>
</div>
</div>
try ng-class="hos.tag" or class="{{hos.tag}}"
You are using ng-class incorrectly: its expression comprises of an object where each property is a class and the value is an expression to evaluate to conditionally apply that class when truth.
For example ng-class="{'active': button.active}"
Hopefully, this fiddle will help: jsFiddle
Unfortunately I won't be able to describe my issue without a visit to my site. DadGab.com.
I have a 'featured slider' col-md-8 with a sidebar to the right. It appears there is some padding or spacing set somewhere and I am unable to find it. I've checked all theme files, style.php. All I am trying to do is move the sidebar on the right side to the top of the page. The empty space did used to be a col-md-4 container which the coding has since been removed.
If I remove the featured slider code from the main page, the 'latest' posts as well as the menu do move to the top of the screen without the padding issue.
Any help would be greatly appreciated.
you have the following structure
<div class="col-md-8"></div>
<div class="clear"></div>
<div class="col-md-8"></div>
<div class="col-md-4"></div>
if i understand you corectly you should have
<div class="col-md-8"></div>
<div class="col-md-4"></div>
so join the code from both .col-md-8 containers, remove the div with class "clear" and it should be OK. This is all done in template homepage.php
You have some problems in your layout logic. You need to think about the way columns and rows work.
You should have a left column (col-md-8) and a sidebar column (col-md-4) and they should be adjacent. The left column should contain ALL of the left content.
Here's what you have:
<div class="row">
<div class="col-md-8">
<!-- featured -->
</div>
<div class="clear"><!-- SEPARATION --></div>
<div class="col-md-8">
<!-- REAST OF LEFT COLUMN -->
</div>
<div class="col-md-4">
<!--
SIDEBAR
You want this next to the left column.
But it's not adjacent!
-->
</div>
</div>
Here's what you want
<div class="row">
<div class="col-md-8">
<!-- FEATURED -->
<!-- REST OF LEFT COLUMN -->
</div>
<div class="col-md-4">
<!-- RIGHT SIDEBAR -->
</div>
</div>
Your current scenario is following
<div class="col-md-8">
featured slider
</div>
<div class="col-md-8">
content
</div>
<div class="col-md-4">
sidebar
</div>
Change it to following
<div class="col-md-8">
featured slider
content
</div>
<div class="col-md-4">
sidebar
</div>
Please let me know if issue is still there :)
After your div "col-md-8" is coming a clearfix. Just creat a "col-md-4" after "col-md-8".
I already tested here, just do it.
Inside the tags
<div class="container"><div class="row">
rearrange the order, from:
<div class="col-md-8"> ... </div>
<div class="clear"></div>
<div class="col-md-8"> ... </div>
<div class="col-md-4"> ... </div>
to:
<div class="col-md-8"> ... </div>
<div class="col-md-4"> ... </div>
<div class="clear"></div>
<div class="col-md-8"> ... </div>
In addition, consider if you really want to keep the div that clears out your floats:
<div class="clear"></div>
If not, comment it out, like so:
<!-- <div class="clear"></div> -->
This indeed moves up your sidebar to the position you want. However, I suspect you will want the last div (of class col-md-8) to be positioned higher. If so, it sounds as if you will need to create two columns inside the row (the div of class row).
I am having problem with the placing of header part above my container part using thesis theme for wordpress as i am unable to do so.
<body class=" customize-support">
<div id="logo"> </div>
<div id="container">
<div id="header">
<h1 id="site_title">
Example
</h1>
<p id="site_tagline"></p>
</div>
<ul id="menu-main-navigation" class="menu">
<div class="columns">
<div class="footer">
</div>
you can do that by adjusting css according to your need.