I try to create a side menu and an items list with bootstrap, but i get a margine shift error see what it looks like. I have modified the thumnail html structure so the image would be at the left
this is the html of the file
<div class="row-fluid">
<!-- LEFT SIDE CATEGORIES-->
<div class="span3">
<div class="well" >
<ul id="cat-navi" class="nav nav-list">
<li class="nav-header">Shop by Product</li>
<li class="active">Active category</li>
<li>New in: Category</li>
</ul>
</div>
<!-- /well-->
</div>
<!-- /left SIDE-->
<!-- CONTENT SIDE-->
<div id="fixthis" class="span9">
<div class="row-fluid articles-grid">
<!-- ITEM -->
<div class="thumbnail span12">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="thumbnail span12">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
<!-- END ITEM -->
</div>
<div class="row-fluid">
<div class="well">
<div class="row-fluid">
<div class="span8">
<p class="lead text-center"> YOUR RECENT MARKETING SLOGAN OR OFFER! </p>
</div>
<div class="span4"> <a class="btn btn-warning btn-large btn-block" href="#">BUY NOW!</a> </div>
</div>
</div>
</div>
</div>
<!-- /CONTENT SIDE-->
</div>
how do i fix this?
Edit: New html
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="thumbnail">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
</div>
<div class="row-fluid">
<div class="thumbnail">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
</div>
</div>
</div>
You are supposed to put a new fluid row after every span.
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<!-- content -->
</div>
<div class="span6">
<!-- content -->
</div>
</div>
</div>
</div>
But, anyway there is an useless span12, you can just directly use the two span6:
<div class="row-fluid">
<div class="span6">
<!-- content -->
</div>
<div class="span6">
<!-- content -->
</div>
</div>
using your last HTML, you are missplacing the thumbnail div, remove it completely and add to the img wraper div, so the wrpper would be span6 thumbnail
here's the DEMO: http://jsfiddle.net/balexandre/dj3AW/
and the code:
<div class="row-fluid">
<!-- LEFT SIDE -->
<div class="span3">
<div class="well" >
<ul id="cat-navi" class="nav nav-list">
<li class="nav-header">Shop by Product</li>
<li class="active">Active category</li>
<li>New in: Category</li>
</ul>
</div>
<!-- /well-->
</div>
<!-- RIGHT SIDE -->
<div class="span9">
<div class="row-fluid">
<div class="span12">
<!-- 1st ROW -->
<div class="row-fluid">
<!-- IMAGE CONTAINER-->
<div class="span6 thumbnail">
IMG
</div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
<!-- 2nd ROW -->
<div class="row-fluid">
<!-- IMAGE CONTAINER-->
<div class="span6 thumbnail">
IMG
</div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
</div>
</div>
</div>
</div>
Related
I cannot apply justify-content: space-between to "DIV1", the div containing all the items in the column.
I have tried to change the height of DIV1 and any of its parent containers to 100%.
I have tried to set the positioning of DIV1 and the "ARTICLE_#" elements to both relative and absolute.
I have tried to set flex-grow: 0 to all the article elements.
I have tried to remove overflows. (This was because when I have set the positioning of the ARTICLE items to relative, the space-between works, but there is an ARTICLE sized gap between all articles. This test I have done on the live version of the page only:
https://utopistlist.com/renowned-nomads-vagabonds-and-hobos/
There if you try to set:
.related .lome.tg-item {
position: relative !important;
}
the space-between works, but with article size gaps between articles.
This is not the original code since the elements were exported from my site from dynamic into static version, so the selectors have changed.
I have changed the height of the column from the original 5786px (live page) to 7786px, because otherwise there would have been no place left for the alignment in the extracted code for showcasing.
https://codepen.io/any_formless/pen/JjPXdQY
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawcdn.githack.com/internetwiki/examplecss/d85cd8dbe31678dc4f9786693a82614592dd0a12/example.css" media="screen" />
</head>
<div id="DIV_1">
<!-- The Grid item #1 -->
<article id="ARTICLE_2">
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/healthy_and_cheap_eats-1-min-1024x1024.png" id="IMG_6" />
</div>
<div id="DIV_7">
</div>
<div id="DIV_8">
<div id="DIV_9">
<div id="DIV_10">
<span id="SPAN_12">January 12, 2018</span>
<h2 id="H2_13">
healthy and cheap eats
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #2 -->
<article id="ARTICLE_15">
<div id="DIV_16">
<div id="DIV_17">
<div id="DIV_18">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy6.jpg" id="IMG_19" />
</div>
<div id="DIV_20">
</div>
<div id="DIV_21">
<div id="DIV_22">
<div id="DIV_23">
<span id="SPAN_25">August 9, 2019</span>
<h2 id="H2_26">
⠀⠀⠀⠀⠀⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #3 -->
<article id="ARTICLE_28">
<div id="DIV_29">
<div id="DIV_30">
<div id="DIV_31">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/robyn_davidson-min-1-1024x1024.png" id="IMG_32" />
</div>
<div id="DIV_33">
</div>
<div id="DIV_34">
<div id="DIV_35">
<div id="DIV_36">
<span id="SPAN_38">January 4, 2018</span>
<h2 id="H2_39">
woman explorers and travelers
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #4 -->
<article id="ARTICLE_41">
<div id="DIV_42">
<div id="DIV_43">
<div id="DIV_44">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy5.jpg" id="IMG_45" />
</div>
<div id="DIV_46">
</div>
<div id="DIV_47">
<div id="DIV_48">
<div id="DIV_49">
<span id="SPAN_51">August 9, 2019</span>
<h2 id="H2_52">
⠀⠀⠀⠀⠀⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #5 -->
<article id="ARTICLE_54">
<div id="DIV_55">
<div id="DIV_56">
<div id="DIV_57">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/franz_degenhardt-min-1-1-1024x1024.png" id="IMG_58" />
</div>
<div id="DIV_59">
</div>
<div id="DIV_60">
<div id="DIV_61">
<div id="DIV_62">
<span id="SPAN_64">January 15, 2018</span>
<h2 id="H2_65">
left-wing musicians
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #6 -->
<article id="ARTICLE_67">
<div id="DIV_68">
<div id="DIV_69">
<div id="DIV_70">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy3.jpg" id="IMG_71" />
</div>
<div id="DIV_72">
</div>
<div id="DIV_73">
<div id="DIV_74">
<div id="DIV_75">
<span id="SPAN_77">August 9, 2019</span>
<h2 id="H2_78">
⠀⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #7 -->
<article id="ARTICLE_80">
<div id="DIV_81">
<div id="DIV_82">
<div id="DIV_83">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/beingliberal-min-min-1024x1024.png" id="IMG_84" />
</div>
<div id="DIV_85">
</div>
<div id="DIV_86">
<div id="DIV_87">
<div id="DIV_88">
<span id="SPAN_90">January 5, 2018</span>
<h2 id="H2_91">
online liberal journals
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #8 -->
<article id="ARTICLE_93">
<div id="DIV_94">
<div id="DIV_95">
<div id="DIV_96">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy4.jpg" id="IMG_97" />
</div>
<div id="DIV_98">
</div>
<div id="DIV_99">
<div id="DIV_100">
<div id="DIV_101">
<span id="SPAN_103">August 9, 2019</span>
<h2 id="H2_104">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #9 -->
<article id="ARTICLE_106">
<div id="DIV_107">
<div id="DIV_108">
<div id="DIV_109">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/slavojzizek-min-2-min-1-1024x1024.png" id="IMG_110" />
</div>
<div id="DIV_111">
</div>
<div id="DIV_112">
<div id="DIV_113">
<div id="DIV_114">
<span id="SPAN_116">December 30, 2017</span>
<h2 id="H2_117">
left-wing philosophers
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #10 -->
<article id="ARTICLE_119">
<div id="DIV_120">
<div id="DIV_121">
<div id="DIV_122">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy2.jpg" id="IMG_123" />
</div>
<div id="DIV_124">
</div>
<div id="DIV_125">
<div id="DIV_126">
<div id="DIV_127">
<span id="SPAN_129">August 9, 2019</span>
<h2 id="H2_130">
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #11 -->
<article id="ARTICLE_132">
<div id="DIV_133">
<div id="DIV_134">
<div id="DIV_135">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/rogerscruton-min-1-min-1-1024x1024.png" id="IMG_136" />
</div>
<div id="DIV_137">
</div>
<div id="DIV_138">
<div id="DIV_139">
<div id="DIV_140">
<span id="SPAN_142">December 30, 2017</span>
<h2 id="H2_143">
right-wing thinkers
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #12 -->
<article id="ARTICLE_145">
<div id="DIV_146">
<div id="DIV_147">
<div id="DIV_148">
<img alt="" width="485" height="485" src=" /wp-content/uploads/2019/08/squarestudy1.jpg" id="IMG_149" />
</div>
<div id="DIV_150">
</div>
<div id="DIV_151">
<div id="DIV_152">
<div id="DIV_153">
<span id="SPAN_155">August 9, 2019</span>
<h2 id="H2_156">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #13 -->
<article id="ARTICLE_158">
<div id="DIV_159">
<div id="DIV_160">
<div id="DIV_161">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/grigoriperelman-min-min-1024x1024.png" id="IMG_162" />
</div>
<div id="DIV_163">
</div>
<div id="DIV_164">
<div id="DIV_165">
<div id="DIV_166">
<span id="SPAN_168">January 6, 2018</span>
<h2 id="H2_169">
notable recluses
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #14 -->
<article id="ARTICLE_171">
<div id="DIV_172">
<div id="DIV_173">
<div id="DIV_174">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy7.jpg" id="IMG_175" />
</div>
<div id="DIV_176">
</div>
<div id="DIV_177">
<div id="DIV_178">
<div id="DIV_179">
<span id="SPAN_181">August 9, 2019</span>
<h2 id="H2_182">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #15 -->
<article id="ARTICLE_184">
<div id="DIV_185">
<div id="DIV_186">
<div id="DIV_187">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/heartofglassfilm-min-1-min-1-1024x1024.png" id="IMG_188" />
</div>
<div id="DIV_189">
</div>
<div id="DIV_190">
<div id="DIV_191">
<div id="DIV_192">
<span id="SPAN_194">December 30, 2017</span>
<h2 id="H2_195">
art-house films
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #16 -->
<article id="ARTICLE_197">
<div id="DIV_198">
<div id="DIV_199">
<div id="DIV_200">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy8.jpg" id="IMG_201" />
</div>
<div id="DIV_202">
</div>
<div id="DIV_203">
<div id="DIV_204">
<div id="DIV_205">
<span id="SPAN_207">August 11, 2019</span>
<h2 id="H2_208">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #17 -->
<article id="ARTICLE_210">
<div id="DIV_211">
<div id="DIV_212">
<div id="DIV_213">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/adamgreen-min-min-1-1024x1024.png" id="IMG_214" />
</div>
<div id="DIV_215">
</div>
<div id="DIV_216">
<div id="DIV_217">
<div id="DIV_218">
<span id="SPAN_220">January 3, 2018</span>
<h2 id="H2_221">
distinct musicians
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #18 -->
<article id="ARTICLE_223">
<div id="DIV_224">
<div id="DIV_225">
<div id="DIV_226">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy9.jpg" id="IMG_227" />
</div>
<div id="DIV_228">
</div>
<div id="DIV_229">
<div id="DIV_230">
<div id="DIV_231">
<span id="SPAN_233">August 11, 2019</span>
<h2 id="H2_234">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #19 -->
<article id="ARTICLE_236">
<div id="DIV_237">
<div id="DIV_238">
<div id="DIV_239">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/munchausentrilemma-min-min-1-1024x1024.png" id="IMG_240" />
</div>
<div id="DIV_241">
</div>
<div id="DIV_242">
<div id="DIV_243">
<div id="DIV_244">
<span id="SPAN_246">January 4, 2018</span>
<h2 id="H2_247">
unsolved problems in philosophy
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #20 -->
<article id="ARTICLE_249">
<div id="DIV_250">
<div id="DIV_251">
<div id="DIV_252">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy10.jpg" id="IMG_253" />
</div>
<div id="DIV_254">
</div>
<div id="DIV_255">
<div id="DIV_256">
<div id="DIV_257">
<span id="SPAN_259">August 11, 2019</span>
<h2 id="H2_260">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #21 -->
<article id="ARTICLE_262">
<div id="DIV_263">
<div id="DIV_264">
<div id="DIV_265">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/friedrichnietsche-min-min-1-2-1024x1024.png" id="IMG_266" />
</div>
<div id="DIV_267">
</div>
<div id="DIV_268">
<div id="DIV_269">
<div id="DIV_270">
<span id="SPAN_272">January 6, 2018</span>
<h2 id="H2_273">
atheist philosophers
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #22 -->
<article id="ARTICLE_275">
<div id="DIV_276">
<div id="DIV_277">
<div id="DIV_278">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy11.jpg" id="IMG_279" />
</div>
<div id="DIV_280">
</div>
<div id="DIV_281">
<div id="DIV_282">
<div id="DIV_283">
<span id="SPAN_285">August 11, 2019</span>
<h2 id="H2_286">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #23 -->
<article id="ARTICLE_288">
<div id="DIV_289">
<div id="DIV_290">
<div id="DIV_291">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/thebluebrainproject-min-min-1-1024x1024.png" id="IMG_292" />
</div>
<div id="DIV_293">
</div>
<div id="DIV_294">
<div id="DIV_295">
<div id="DIV_296">
<span id="SPAN_298">January 6, 2018</span>
<h2 id="H2_299">
artificial brain intelligence
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #24 -->
<article id="ARTICLE_301">
<div id="DIV_302">
<div id="DIV_303">
<div id="DIV_304">
<img alt="" width="500" height="501" src=" /wp-content/uploads/2019/08/squarestudy12.jpg" id="IMG_305" />
</div>
<div id="DIV_306">
</div>
<div id="DIV_307">
<div id="DIV_308">
<div id="DIV_309">
<span id="SPAN_311">August 11, 2019</span>
<h2 id="H2_312">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #25 -->
<article id="ARTICLE_314">
<div id="DIV_315">
<div id="DIV_316">
<div id="DIV_317">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/blockchain-min-min-1-1024x1024.png" id="IMG_318" />
</div>
<div id="DIV_319">
</div>
<div id="DIV_320">
<div id="DIV_321">
<div id="DIV_322">
<span id="SPAN_324">January 8, 2018</span>
<h2 id="H2_325">
decentralizing technologies
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #26 -->
<article id="ARTICLE_327">
<div id="DIV_328">
<div id="DIV_329">
<div id="DIV_330">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy13.jpg" id="IMG_331" />
</div>
<div id="DIV_332">
</div>
<div id="DIV_333">
<div id="DIV_334">
<div id="DIV_335">
<span id="SPAN_337">August 11, 2019</span>
<h2 id="H2_338">
⠀
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #27 -->
<article id="ARTICLE_340">
<div id="DIV_341">
<div id="DIV_342">
<div id="DIV_343">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/means_of_non_violent_action-min-min-1-1024x1024.png" id="IMG_344" />
</div>
<div id="DIV_345">
</div>
<div id="DIV_346">
<div id="DIV_347">
<div id="DIV_348">
<span id="SPAN_350">January 10, 2018</span>
<h2 id="H2_351">
means of nonviolent action
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #28 -->
<article id="ARTICLE_353">
<div id="DIV_354">
<div id="DIV_355">
<div id="DIV_356">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/tiddlywiki-min-min-1024x1024.png" id="IMG_357" />
</div>
<div id="DIV_358">
</div>
<div id="DIV_359">
<div id="DIV_360">
<div id="DIV_361">
<span id="SPAN_363">January 10, 2018</span>
<h2 id="H2_364">
mind mapping tools
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</html>
Justify-content doesn't work as intended because every article you have is using position: absolute. When you use position: absolute, the position of the element only cares about the top, left, right, bottom attributes.
Also, you don't need individual styling for each article, since each article looks the same.
Just have one class called .article and put all your styling there. Remove the positioning and let flexbox take care of it for you.
EDIT:
The OP's solution is also part of the overall answer.
OP's answer:
I found the solution, one of the parent (grand-grand parent)
containers was not at 100 % height. And since Stackoverflow only
allows 30000 characters in the code field, I could not post the whole
code with the many parent containers.
I found the solution, one of the parent (grand-grand parent) containers was not at 100 % height. And since Stackoverflow only allows 30000 characters in the code field, I could not post the whole code with the many parent containers.
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
`<!DOCTYPE html>
<html class="no-js">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Timer Agency Template</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Template CSS Files
================================================== -->
<!-- Twitter Bootstrs CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Ionicons Fonts Css -->
<link rel="stylesheet" href="css/ionicons.min.css">
<!-- animate css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Hero area slider css-->
<link rel="stylesheet" href="css/slider.css">
<!-- owl craousel css -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<!-- template main css file -->
<link rel="stylesheet" href="css/main.css">
<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Template Javascript Files
================================================== -->
<!-- modernizr js -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- owl carouserl js -->
<script src="js/owl.carousel.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- wow js -->
<script src="js/wow.min.js"></script>
<!-- slider js -->
<script src="js/slider.js"></script>
<script src="js/jquery.fancybox.js"></script>
<!-- template main js -->
<script src="js/main.js"></script>
</head>
<body>
<!--
==================================================
Header Section Start
================================================== -->
<header id="top-bar" class="navbar-fixed-top animated-header">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<div class="navbar-brand">
<a href="index.html" >
<img src="images/logo.png" alt="">
</a>
</div>
<!-- /logo -->
</div>
<!-- main menu -->
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<div class="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html" >Home</a>
</li>
<li>Sign Up</li>
<li>Log In</li>
<li>Contact</li>
</ul>
</div>
</nav>
<!-- /main nav -->
</div>
</header>
<!--
==================================================
Slider Section Start
================================================== -->
<section id="hero-area" >
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="block wow fadeInUp" data-wow-delay=".3s">
<!-- Slider -->
<section class="cd-intro">
<h1 class="wow fadeInUp animated cd-headline slide" data-wow-delay=".4s" >
<span>EMPLOYEE TRAINING PROGRAMME</span><br>
<span class="cd-words-wrapper">
<b class="is-visible">(ETP)</b>
<b>DEVELOPER</b>
<b>FATHER</b>
</span>
</h1>
</section> <!-- cd-intro -->
<!-- /.slider -->
<a class="btn-lines dark light wow fadeInUp animated smooth-scroll btn btn-default btn-green" data-wow-delay=".9s" href="#works" data-section="#works" >View Programmes</a>
</div>
</div>
</div>
</div>
</section><!--/#main-slider-->
<!--
==================================================
Slider Section Start
================================================== -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>
ABOUT THE COMPANY
</h2>
<p>
Persistent Systems is a technology services company which was incorporated on 16 May 1990 as Persistent Systems Private Limited. It was subsequently converted into a public Limited company on 17 September 2010 with the name Persistent Systems Limited and a new certificate of incorporation was issued on 28 September 2007 from the RoC.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<img src="images/about/about.jpg" alt="">
</div>
</div>
</div>
</div>
</section> <!-- /#about -->
<!--
==================================================
Portfolio Section Start
================================================== -->
<section id="works" class="works">
<div class="container">
<div class="section-heading">
<h1 class="title wow fadeInDown" data-wow-delay=".3s">Available Programmes</h1>
<p class="wow fadeInDown" data-wow-delay=".5s">
The following programmes are available for our employees..
</p>
</div>
<div class="row">
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<div class="img-wrapper">
<img src="images/portfolio/item-1.jpg" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for Selenium</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
Selenium
</a>
</h4>
<p>
Automated software testing tool
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="img-wrapper">
<img src="images/portfolio/item-2.jpg" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for Robotium</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
Robotium
</a>
</h4>
<p>
Automation testing framework (Android) </p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="img-wrapper">
<img src="images/portfolio/item-3.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for TestComplete</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
TestComplete
</a>
</h4>
<p>
Open testing platform
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="600ms">
<div class="img-wrapper">
<img src="images/portfolio/item-4.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for SoapUI</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
SoapUI
</a>
</h4>
<p>
Web service testing application
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="900ms">
<div class="img-wrapper">
<img src="images/portfolio/item-5.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for QTP(HP)</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
QTP
</a>
</h4>
<p>
Automated functional testing tool
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="1200ms">
<div class="img-wrapper">
<img src="images/portfolio/item-6.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for TestDrive</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
TestDrive
</a>
</h4>
<p>
Automated software quality solution
</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section> <!-- #works -->
<!--
==================================================
Portfolio Section Start
================================================== -->
<section id="feature">
<div class="container">
<div class="section-heading">
<h1 class="title wow fadeInDown" data-wow-delay=".3s">BENEFITS</h1>
<p class="wow fadeInDown" data-wow-delay=".5s">
The benefits of the programme are clearly very high.<br>The programme empowers you with new ways for quality software development.
</p>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInUp animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-flask-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Better product quality
</h4>
<p>After the programme,the products you generate will see a rise in quality.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="600ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-lightbulb-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Client satisfaction
</h4>
<p>Better quality products will automatically lead to better client satisfaction</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="900ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-lightbulb-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Work reduction
</h4>
<p>The programme will allow you to generate products in a complete new mannner thus reducing your work.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1200ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-americanfootball-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Easier development
</h4>
<p>Development of new products will now be easier than ever before.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1500ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-keypad-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Increased work rate
</h4>
<p>New methods will allow you to work at a faster pace thus increasing your work rate.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1800ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-barcode-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Skill upgradation</h4>
<p>Last but not the least,you will have a new set of skills completely industry relevant.</p>
</div>
</div>
</div>
</div>
</div>
</section> <!-- /#feature -->
<!--
==================================================
Call To Action Section Start
================================================== -->
<section id="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<h2 class="title wow fadeInDown" data-wow-delay=".3s" data-wow-duration="500ms">STILL THINKING?</h1>
<p class="wow fadeInDown" data-wow-delay=".5s" data-wow-duration="500ms">Stop thinking. Begin now. The later you begin, the more you will be left behind.</p>
Contact With Me
</div>
</div>
</div>
</div>
</section>
<!--
==================================================
Footer Section Start
================================================== -->
<footer id="footer">
<div class="container">
<div class="col-md-8">
<p class="copyright">Copyright: <span>2015</span> . `enter code here`Design and Developed by Themefisher</p>
</div>
<div class="col-md-4">
<!-- Social Media -->
<ul class="social">
<li>
<a href="https://www.facebook.com/PersistentSystems/" target="_blank"class="Facebook">
<i class="ion-social-facebook"></i>
</a>
</li>
<li>
<a href="https://twitter.com/Persistentsys?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="Twitter">
<i class="ion-social-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/persistent-systems" class="Linkedin" target="_blank">
<i class="ion-social-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</footer> <!-- /#footer -->
</body>
</html>
I am currently working on a web project where if the user wants to enroll for a particular program the user clicks on enroll and they are redirected to the log in page. but I want that they should be automatically redirected to their profile pages if they are already logged in.What should I do.Also I am a newbie to stackoverflow so I don't know how to present my code here.If someone would tell me how to do so I am totally open to do it.
You have to test in PHP if your user is logged into your website.
session_start();
if(isset($_SESSION['isLogged'])){
header('Location: profil.php');
exit;
}
else {
header('Location: login.php');
exit;
}
I suppose you don't know a lot PHP, so you should have a look to how create a membership and use PHP sessions :-)
https://code.tutsplus.com/tutorials/user-membership-with-php--net-1523
well you need to check your if session or if cookie exists and is not expired .... if they exist then you redirect before the whole page is loaded (server Logic) ... as i dont know what language you have written you server logic in i cant help you with the code
After user is logged-in generate a user token and store it in a cookie when ever user redirect to login-page use jquery/javascript to check the cookie then from there you can decide whether user should stay in login-page or redirect to profile page.
You can post your code by pasting in the editor and select the code then click on {} this symbol
I am upgrading to Bootstrap v3 and have encountered an issue with the thumbnails.
Here is my code:
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
And here is what it produces:
As you can see, the left hand thumbnails are not inline with the content.
Bootstrap uses a 12-column grid. 3 * 6 > 12. If you want the columns to run next to each other, you'll need to use col-sm-4 (4 * 3 = 12):
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
Alternatively, if you want each thumbnail to occupy 6 columns, place them into two rows:
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
You are using the row class incorrectly. A row can contain a maximum of 12 columns. You are adding 3*6=18 columns to the same row.
Add another row.
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="row">
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
I'm trying to center a Row and the spans inside of it with bootsrap.
You can see it in the footer here:
http://www.divisionforty.com/wall/
I'd like the social networking icons to be on the left, copyright in the middle the powered by on the right, as it all is.
footer code:
<div id="footer">
<div id="footer-content">
<div id="footer-bottom" class="clear">
<div class="row" style="margin: 0 auto;">
<div class="span12" style="width:100%;">
<div class="span2" style="text-align:left;">
<img alt="twitter" class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/twitter.png">
<a href="https://www.facebook.com/pages/Wall-Space-Gallery-and-Framing/195974620432391">
<img alt="facebook" class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/facebook.png"></a>
</div>
<div class="span6" style="text-align:center;">
<h5>
Copyright © <script type="text/javascript">
//<![CDATA[
var dteNow = new Date();
var intYear = dteNow.getFullYear();
document.write(intYear);
//]]>
</script>
Wall Space Gallery And Framing - All Rights Reserved.
</h5>
</div>
<div class="span4" style="text-align:right;">
<h5>Powered by Division Forty</h5>
</div>
</div>
</div>
</div><!--END FOOTER-BOTTOM-->
</div><!--END FOOTER-CONTENT-->
</div><!--END FOOTER-->
Hope someone can help.
Thanks
Denver
<div id="footer">
<div id="footer-content">
<div id="footer-bottom" class="clear">
<div class="row" style="margin: 0 auto;">
<div class="span12" style="width:100%;">
<div class="span2 text-left">
<img alt="twitter" class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/twitter.png">
<a href="https://www.facebook.com/pages/Wall-Space-Gallery-and-Framing/195974620432391">
<img alt="facebook" class="social" src="<?php bloginfo('stylesheet_directory'); ?>/img/facebook.png"></a>
</div>
<div class="span6 text-center">
<h5>
Copyright © <script type="text/javascript">
//<![CDATA[
var dteNow = new Date();
var intYear = dteNow.getFullYear();
document.write(intYear);
//]]>
</script>
Wall Space Gallery And Framing - All Rights Reserved.
</h5>
</div>
<div class="span4 text-right">
<h5>Powered by Division Forty</h5>
</div>
</div>
</div>
</div><!--END FOOTER-BOTTOM-->
</div><!--END FOOTER-CONTENT-->
</div><!--END FOOTER-->
You can use the built in alignment classes text-left, text-right, and text-center
Is it your design to let footer full width as screen width?
if yes, you just have to change your row class to row-fluid class.
Bootstrap 2.3.2 is using row-fluid, not row.
<div id="footer">
<div id="footer-content">
<div id="footer-bottom" class="clear">
<div class="row-fluid" style="margin: 0 auto;">
<div class="span12" style="width:100%;">
<div class="span2 text-left">
</div>
<div class="span6 text-center">
</div>
<div class="span4 text-right">
</div>
</div>
</div>
</div><!--END FOOTER-BOTTOM-->
</div><!--END FOOTER-CONTENT-->
</div><!--END FOOTER-->
if no, put a container for the width.