I am new to programming and having difficulty in adjusting the bootstrap grids to fit my framework; I am trying to do a 3 columns side bar on the left, and followed by a 9 column main side bar on the right - but they appeared as 12 columns each after I input my code.
<div class="content row">
<?php include "_/components/php/snippet-carousel.php"; ?>
<section class="col-md-3 col-md-pull-9 sidebar">
<?php include "_/components/php/aside-social.php"; ?>
</section><!-- sidebar -->
<section class="col-md-9 col-md-push-3 cont-grid">
<?php include "_/components/php/weekend-intro.php"; ?>
<?php include "_/components/php/popular-categories.php"; ?>
</section><!-- main -->
</div><!-- content -->
<?php include "_/components/php/footer.php"; ?>
</section><!-- container -->
Take a look at this code. Maybe it will help you:
<div class="content">
<div class="row">
<div class="col-md-12"><?php include "_/components/php/snippet-carousel.php"; ?></div>
</div>
<div class="row">
<section class="col-md-3 sidebar"><?php include "_/components/php/aside-social.php"; ?></section>
<section class="col-md-9 cont-grid">
<?php include "_/components/php/weekend-intro.php"; ?>
<?php include "_/components/php/popular-categories.php"; ?>
</section>
</div>
<div class="row">
<div class="col-md-12"><?php include "_/components/php/footer.php"; ?></div>
</div>
</div>
You have one closing section with no opening one. And I suppose you wrap the whole thing into a container?
Related
I am working on a new CMS called bludit. I have chosen a theme for this cms but I still have to modify it a bit. Right now, I’m trying to make the image take the full width of the screen : Visuel site
Here you can see the code for the original header image :
<section class="page">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="content-card">
<!-- Page cover image -->
<?php if ($page->coverImage()): ?>
<div class="page-cover-image mb-4"
style="background-image: url('<?php echo $page->coverImage(); ?>');">
<div style="height: 400px;"></div>
</div>
<?php endif ?>
As I try to make the image take all the width but that the text below keeps these dimensions, I logically tried to get the div out of the image of the container as well as this col-lg-8. Here’s what I tried:
<div class="container-fluid">
<div class="row">
<!-- for the image take all the width -->
<div class="containerImage col-lg-12">
<div class="header-image">
<div class="contenu">
<!-- Page cover image -->
<?php if ($page->coverImage()): ?>
<div class="page-cover-image mb-4"
style="background-image: url('<?php echo $page->coverImage(); ?>');">
<div style="height: 400px;"></div>
</div>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
And the CSS :
.page-cover-image {
width: 100%;
}
.contenu {
width: 100%;
}
But I don’t understand why there is no effect... Anyone has an idea of the problem? Maybe an left margin specific to CMS? Probably I made a mistake...
Thank you very much in advance.
Sofia R.
The image has already a width of 100%. It's part of different div defining the width.
If you would like to have a greater width, you have to modify the theme, which uses Bootstrap.
I got a couple of col-sm-6 divs for a page. I use the_post_thumbnail() to get the page featured image and put it in the first col-sm-6 column but the image breaks out the column.
I could use "medium" as a parameter but I would like the image to fit that column width automatically.
How can I get it?
<div class="row">
<div class="col-sm-6 page-frame">
<h1 class="blog-post-title"><?php the_title(); ?></h1>
<?php if( has_post_thumbnail() ) the_post_thumbnail( 'full' ); ?>
</div><!-- col-sm-6 -->
<div class="col-sm-6 page-frame">
<?php the_content(); ?>
</div><!-- col-sm-6 -->
Sounds like you are on the right track, in your css you would probably just do a max-width: 100%; or a min-width: 100%;
I wanted to use this thumbnail slider from Bootstrap http://www.bootply.com/81478 in my webpage. To get all the images from the database, this is how i fetch and echo them:
<?php while ($rowz = mysqli_fetch_array($result3)) {
?><img width="150"src="images/<?php echo $rowz['image']; ?><?php}?>
However, the following example from the link I have given above, the images are hardcoded for an example obviously. I tried inserting those lines of codes like this but it gives me multiple sliders with only an image in it. How do I fix this such that all the images that i fetch from the database gets into this slider as one row?
<?php while ($rowz = mysqli_fetch_array($result3)) { <--fetch by loop-->
?>
<div class="container">
<div class="col-md-12">
<h1>Bootstrap 3 Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<img width="150"src="images/<?php echo $rowz['image']; ?><?php}?> <--echo here-->
</div>
</div>
<!--/row-->
</div>
I want to make a Bootstrap Theme with the Menu on the left sidebar. The problem is that I can't fix the content after the sidebar menu. Here's a screenshot:
.
The content is placed into a row, in 4 span3 divs. How can I make this content to move right next to the sidebar nav?
<?php
if ( !defined('ABSPATH')) exit;
get_header();
?>
<?php if(is_front_page()): ?>
<div class="row wpeden-bs-services">
<?php for($i=1;$i<=4;$i++){ ?>
<div class="span3">
<?php $tpid = (int)bleed_get_theme_opts('home_featured_page_'.$i); $intropage=get_page($tpid); $introcontent = strip_tags(strip_shortcodes($intropage->post_content),"p,br"); if (preg_match('/^.{1,80}\b/s', $introcontent, $match)) $introcontent = $match[0]; else $introcontent = substr($introcontent,0,80); ?>
<div class="about well">
<?php bleed_thumb($intropage,array(500,300), array('class'=>'img')); ?>
<div class="entry-content">
<h2><?php echo $intropage->post_title; ?></h2>
<p><?php echo $introcontent; ?></p>
</div>
View details
</div>
</div>
<?php } ?>
<!-- /.span4 -->
<?php get_template_part('homepage','category'); ?>
<div class="clear"></div>
<div>
</div>
</div><!-- /.span4 -->
<?php endif; ?>
<?php get_footer(); ?>
if i understood you correctly it looks like you need to nest your rows.
<div class="row">
<div class="span4">
side bar here
</div>
<div class="span8">
nested content goes here
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
</div>
This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.
Make sure to keep all page content within the #page-content-wrapper.
http://blackrockdigital.github.io/startbootstrap-simple-sidebar/
I'm having issue getting my grid to align correctly. Here is the HTML
<div class="span6" id="content">
<!-- Category 2 is Programming category. -->
<?php $programming_posts = get_posts('2'); ?>
<div class="row-fluid">
<?php foreach($programming_posts as $key => $post){ ?>
<div class="span6 well well-small" id="post-preview">
<?php echo $post->post_excerpt;?>
</div>
<?php }?>
</div>
</div>
Here is the CSS
#post-preview{
border: 1px solid rgba(140,140,140,1);
border-radius: 2px;
max-height: 135px;
min-height: 135px;
margin-bottom: 5px;
}
As you can see the first row is not aligned with the rows that comes after it. The first row is the row with the right alignment. I'm not sure how to fix this?
You html structure is bad as a row-fluid can have only maximum of 12 columns, ie in this case two <div class="span6 well well-small" id="post-preview"> elements. But in your case you are adding all post-preview divs to a single row-fluid
Your html must be structure should be like
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
</div>
<div class="span6 well well-small" id="post-preview2">
</div>
</div>
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
</div>
<div class="span6 well well-small" id="post-preview2">
</div>
</div>
Also the id should be unique in a document, you have many divs with id post-preview because of the loop
Approach A:
Since you have 4 blocks, you can use span3 class:
<div class="span3 well well-small" id="post-preview">
<?php echo $post->post_excerpt;?>
</div>
Approach B:
If you want to keep the width and only display a pair of blocks in one line, then you can split pairs of divs into separate row-fluid (PHP code is just for reference):
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
<?php echo $post->post_excerpt;?>
</div>
<div class="span6 well well-small" id="post-preview2">
<?php echo $post->post_excerpt;?>
</div>
</div>
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
<?php echo $post->post_excerpt;?>
</div>
<div class="span6 well well-small" id="post-preview2">
<?php echo $post->post_excerpt;?>
</div>
</div>