I'm trying to make a bootstrap design as shown in the codepen.
Everything works fine when I look at the codepen:
Codepen_bootstrap
... but when looking a the page locally in my browser (chrome and safari) the design gets crushed and things do not stack as it should.
The problem is, that the <div class="container thirdSection">is not expanding as I was wanted it. So the rows inside this container-div do exceed the borders of the container.
Same thing happens inside the <div class="container fourthSection">
Local setup is Wordpress running on "Local by flywheel".
Problem is shown in the following screenshot.
Bootstrap_screenshot_1
Bootstrap_screenshot_2
Could Wordpress be the problem?
index.php
<?php get_header(); ?>
<div class="container secondSection">
<div class="row firstRow">
<div class="col-sm-4 firstCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/fitsperfect.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">100% correct</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quo blanditiis ut necessitatibus ad quisquam? Voluptas, molestiae nobis, cum obcaecati magni soluta numquam rerum quas nemo facere doloribus voluptates sint.</p>
</div>
<div class="col-sm-4 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/like.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam praesentium itaque unde voluptatibus similique numquam repellendus earum aspernatur porro maiores veritatis, animi necessitatibus? Rerum sit sunt repudiandae ipsam mollitia est!</p>
</div>
<div class="col-sm-4 thirdCol p">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/secure.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">lorem heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, repellendus dignissimos. Minima sunt voluptatem et reprehenderit molestias dignissimos, facilis voluptate, sit rerum beatae, hic error deleniti accusantium unde possimus est!</p>
</div>
</div>
</div>
<div class="container thirdSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Five Steps from here to there</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum enim consequuntur a dolorum amet voluptatum, ducimus eveniet laboriosam voluptatem qui, asperiores nisi minus libero similique molestias animi eos quod totam odio dolores. Assumenda dicta eveniet modi ex velit dolorum cumque ut aperiam architecto? Culpa iusto officiis minima fugiat suscipit adipisci ab sed perspiciatis rerum eveniet doloremque, dicta quibusdam architecto labore ad laudantium? Quas voluptas rerum modi mollitia fuga tenetur nesciunt illo earum? Vitae hic sequi beatae, quasi, eligendi, magni ipsam libero velit non nobis illo mollitia molestiae. Sequi vitae doloribus iusto rerum tempora? In laborum perferendis dolores molestias suscipit! Voluptate necessitatibus, beatae a iure nesciunt odit officiis reiciendis, molestias sint sapiente optio error et quam maiores repudiandae minus, atque eaque soluta quasi provident illum? Numquam dignissimos autem dolore cumque laboriosam cum sapiente mollitia nesciunt quaerat labore ratione quod, corporis soluta natus porro eveniet eligendi et dolorum est ullam accusamus placeat?</p>
</div>
</div>
<div class="row secondRow pt-5 pb-5">
<div class="col-md-6 col-sm-12 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/window-art#2x.png');?>" width="446" height="471" class="d-inline-block img-fluid" alt="">
</div>
</div>
<div class="col-md-6 col-sm-12 thirdCol">
<ul class="list-display list-checkmarks">
<li ><span class="pfDinTextBold">This is a little bit of descripton</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, doloribus!</li>
<li ><span class="pfDinTextBold">This is a little bit more of a descripton</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, maiores.</li>
<li ><span class="pfDinTextBold">Takes some moer than describing</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, recusandae.</li>
<li ><span class="pfDinTextBold">Stripes are a better design then dots</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, deleniti.</li>
</ul>
<ul class="list-display listButton pt-4">
<li ><span><button type="button" class="btn buttonRed btn-block">configure button</button></span></li>
</ul>
</div>
</div>
</div>
<div class="container fourthSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Just the best for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nulla laborum nesciunt! Nam possimus amet quas nesciunt saepe non veritatis molestiae optio. Est a dicta placeat impedit recusandae, ipsum exercitationem blanditiis nostrum atque optio pariatur? Numquam illum eius, a eveniet ex et consequatur inventore in modi quibusdam, at repudiandae voluptatem. Adipisci odio dolor laudantium culpa quis debitis sint quae temporibus.</p>
</div>
</div>
<!-- <div class="row firstRow pt-5 pb-5 order-1"> -->
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container fifthSection">
<div class="row firstRow pt-5 pb-5 order-2">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some free samples?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium perspiciatis itaque quidem ex, aperiam, debitis natus eos ullam corporis quos a aliquid ratione officia cumque veritatis quas ipsam rem cupiditate harum, quo illum. Voluptatum itaque odit deleniti voluptatibus quia quam.</p>
<span><button type="button" class="btn buttonYellow btn-block">Configuration</button></span>
</div>
</div>
</div>
<div class="container sixthSection">
<div class="row SecondRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some text goes here</h2>
</div>
</diy>
<div class="row SecondRow pt-5 pb-5">
<div class="col-md-4 FirstCol">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi libero rerum explicabo? Incidunt laborum adipisci inventore ipsam expedita blanditiis sapiente atque tenetur? Provident facilis tempora ipsam veniam magnam nulla harum, eum fuga! Quis illum natus itaque nihil nulla hic molestiae doloribus molestias ab minus laborum exercitationem iure, sunt temporibus, provident ea maiores praesentium in beatae dolore fugiat alias mollitia adipisci at? Officia id nemo placeat, consectetur repellendus vel error beatae itaque, quibusdam hic maxime reprehenderit laudantium corporis. Dicta, sapiente consequatur, nisi veritatis rerum nesciunt consequuntur iusto qui esse autem soluta quam ipsam! Ut voluptatem doloribus nulla, assumenda praesentium distinctio laudantium reiciendis perferendis natus eveniet consequuntur minus at earum ex voluptatum asperiores, nesciunt, quisquam libero tempora? Asperiores molestias blanditiis, nobis minima architecto ea consequuntur minus nemo dolores perspiciatis, officia optio numquam aliquam placeat vel quia accusamus magni, laboriosam suscipit quaerat sit non odit adipisci molestiae. Deleniti rerum reprehenderit eius facere dolore.
</p>
</div>
<div class="col-md-4 SecondCol">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, sint obcaecati earum rerum dolore adipisci numquam exercitationem repudiandae quis, officiis sit? Nulla voluptatem sint incidunt. Perspiciatis aut sed alias aliquam, illum aliquid repudiandae cupiditate perferendis placeat harum repellendus enim accusamus, optio consequuntur officiis. Perspiciatis quam exercitationem quaerat neque, quidem voluptatem soluta numquam commodi voluptatum laudantium harum totam doloribus quibusdam? Vitae eveniet, at dolorum animi consectetur impedit earum dicta exercitationem accusamus autem pariatur doloremque optio suscipit ipsam maiores nam atque culpa incidunt deleniti. Modi nulla harum quae suscipit. Sint, inventore soluta eaque aperiam, nobis omnis aliquid quo quas consectetur veniam at quasi recusandae quaerat est eum fugit voluptatibus autem odit suscipit tempora error mollitia dignissimos incidunt in. Nihil expedita natus rem necessitatibus culpa corrupti ab, laborum earum magni quo. Voluptatum doloribus eligendi odio vitae dolorem aspernatur veniam itaque, laboriosam doloremque ea autem. Repellat dolor asperiores dolore voluptates excepturi, at nobis delectus!
</p>
</div>
<div class="col-md-4 ThirdCol">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat suscipit ad id voluptatem. Cupiditate nesciunt accusamus vero ea mollitia velit laudantium iusto, ipsa quibusdam, aliquid accusantium doloremque nulla quo numquam ducimus nostrum fugit labore iure saepe error? Odio officia, voluptatum cum architecto, natus hic veritatis sequi quae blanditiis molestiae, pariatur culpa. Officia voluptas earum reprehenderit ab accusantium nam iste sequi nesciunt ea laborum non aliquid eligendi, quaerat deleniti, necessitatibus sunt minima reiciendis. Dolore eum ipsam molestias nisi tenetur, enim quia corporis repellat, dolorem hic debitis. A reprehenderit voluptas dignissimos exercitationem laboriosam rerum distinctio consectetur qui recusandae natus, repellendus vitae quas, doloribus impedit mollitia, nihil veritatis quidem. Est, cum ipsam provident distinctio excepturi pariatur quasi labore perferendis unde ut, ullam possimus non fugiat a odio, rerum ab minus maxime architecto accusantium. Similique, sapiente ad! Ea delectus quis temporibus expedita natus quae nesciunt officia, architecto unde similique, facilis est aut! Quibusdam voluptatibus praesentium perspiciatis, voluptatum atque suscipit perferendis corporis sit dignissimos asperiores recusandae minus delectus nesciunt! Dicta necessitatibus similique veniam rerum beatae eligendi, inventore exercitationem autem id saepe quisquam est sequi cum aspernatur ipsa accusantium aut delectus harum nulla, quis facilis. Magnam ab, doloremque commodi obcaecati quam vero fugiat ea deserunt quis.
</p>
</div>
</div>
</div>
<?php
get_footer();
?>
header.php
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head();?>
</head>
<body>
<header>
<div class="container">
<div class="container topSection">
<div class="row justify-content-center mt-0 pt-0 pb-0">
<div class="col-sm-12 d-flex justify-content-center">
<span class="topSection d-flex align-items-center"><img src="<?php echo get_theme_file_uri('/images/icons8-in_transit copy.svg');?>" width="30" height="30" class="d-inline-block mr-1" alt="" loading="lazy"> Fsat shipping from our warehouse</span>
</div>
</div>
</div>
<div class="container">
<div class="row rowSectionNav align-items-center">
<div class="col-sm-12 justify-content-center">
<nav class="navbar navbar-expand-lg navbar-light bg-white navNoPaddingMargin">
<a class="navbar-brand d-flex align-items-center brandName" href="#"><img src="<?php echo get_theme_file_uri('/images/fensterfolie.svg');?>" width="40" height="40" class="d-inline-block align-top mr-2" alt="" loading="lazy">Logo <span style="color: #FF5A6E;font-family: Uni-Sans-Bold; font-size: 1.6rem" >+</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
footer.php
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">About</h5>
<ul class="list-unstyled">
<li>
<p>
Link1
</p>
</li>
<li>
<p>
Link2
</p>
</li>
<li>
<p>
Link3
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">Support</h5>
<ul class="list-unstyled">
<li>
<p>
contact us
</p>
</li>
<li>
<p>
FAQ
</p>
</li>
<li>
<p>
Delivers
</p>
</li>
<li>
<p>
Payment
</p>
</li>
<li>
<p>
Business
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Contact details -->
<h5 class="font-weight-bold text-uppercase mb-4">Our services</h5>
<ul class="list-unstyled">
<li>
<p>
<i class="fas fa-home mr-3"></i>free shipping</p>
</li>
<li>
<p>
<i class="fas fa-envelope mr-3"></i>correct</p>
</li>
<li>
<p>
<i class="fas fa-phone mr-3"></i>Simplicity</p>
</li>
<li>
<p>
<i class="fas fa-print mr-3"></i>Warranty</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">delivery</h5>
<!-- Facebook -->
<a type="button" class="btn-floating btn-fb">
<i class="fab fa-facebook-f"></i>
</a>
<!-- Twitter -->
<a type="button" class="btn-floating btn-tw">
<i class="fab fa-twitter"></i>
</a>
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">Secure</h5>
<!-- Google +-->
<a type="button" class="btn-floating btn-gplus">
<i class="fab fa-google-plus-g"></i>
</a>
<!-- Dribbble -->
<a type="button" class="btn-floating btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid row -->
<div class="row">
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<h5 class="font-weight-bold text-uppercase mb-4">Payments</h5>
<span><img src="<?php echo get_theme_file_uri('/images/paypal#2x.png');?>" width="60" height="20" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/sofort#2x.png');?>" width="77" height="24" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/mastercard#2x.png');?>" width="52" height="41" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/Visa#2x.png');?>" width="60" height="20" class="d-inline-block img-fluid" alt=""></span>
</div>
</div>
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
blabla.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<?php wp_footer();?>
</div>
</body>
</html>
functions.php
<?php
function wpbootstrap_enqueue_styles() {
wp_enqueue_style('boostrap_V4','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
wp_enqueue_style('font-awesome-new','https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_script('bootstrap_jquery', '//code.jquery.com/jquery-3.5.1.slim.min.js');
wp_enqueue_script('bootstrap_popper', '//cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js');
wp_enqueue_script('bootstrap_js', '//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');
function flt_files() {
wp_enqueue_style('fensterfolie_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'flt_files');
?>
problem solved: Did add the following to each individual div-container:
.containerClass {
min-height: 100%
}
Related
I started with bootstrap and try to create a row with 2 columns. The column right is split up into 2 rows. I try to use "space-around" to get a nicer layout for the column right (vertically), however, it does not work. The two rows are centered instead. Anyone knows why not? btw: the image itself is larger than the 2 rows in the right column.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid px-0">
<div class="row">
<div class=" col-6">
<img class="img-fluid" src="pictures/Eriko.jpg" alt="">
</div>
<div class="col-6 bg-info">
<div class="row h-100 align-content-around">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-8 text-center bg-danger">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
<div class="row justify-content-center">
<div class="col-8 text-center bg-primary">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
</div>
</div>
</div>
</div>
</section>
screenshot of current result
I am trying to program a website with HTML. This works very well, but I want the footer to be at the bottom of the website!
footer {
background-color: #F2F2F2;
border: 1px solid #DEDCD9;
border-radius: 5px;
clear: both;
}
no error
Here is a 2-column layout with the footer always at the bottom, also using Bootstrap 4 grid for responsiveness:
#wrapper {
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="wrapper" class="d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-9">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quas quae placeat non, eligendi odio, sit animi corporis unde fugiat ex est reprehenderit voluptas facilis quo amet nisi consequuntur perferendis.</p>
<p class="text-justify">Eius reiciendis, modi nam magni, vel et, labore sit perspiciatis obcaecati illo aspernatur laboriosam, sed veritatis nisi deleniti quae alias nesciunt. Et possimus, reprehenderit voluptatibus officiis consequatur illo architecto magnam!</p>
<p class="text-justify">Qui tempora deserunt, corrupti soluta obcaecati ab fugiat consectetur? Asperiores ullam aliquid recusandae doloribus voluptate ipsa. Reprehenderit aspernatur est dolore ipsum voluptatum doloribus atque suscipit. Quod voluptatum, facere temporibus
iure.</p>
<p class="text-justify">Ipsum quasi, iste fugit doloribus accusantium natus provident, dolorum molestiae alias. Quo earum explicabo corporis assumenda autem ratione ea corrupti tenetur, fugit esse doloremque, laborum, ab iste eum. Mollitia, consectetur!</p>
<p class="text-justify">Eligendi dolores nisi quibusdam, officia earum neque harum iure reprehenderit voluptates, veritatis quaerat deserunt ratione porro itaque rem voluptatum minima similique temporibus unde! Quaerat laborum ullam optio sequi quae quidem!</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-3 mb-3">
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</div>
</div>
<div class="footer mt-auto text-center p-2 bg-light">
© Lorem ipsum dolor sit amet
</div>
</div>
Hope it helps.
I have this page : and the problem there is that there's a vacant space below the white part. what I want is to extend the upper contents the (sidebar-nav and the main- content) to be full page.
<section id="left-sidebar-panel">
<div id="left-panel-content">
<img id="pictureShadow" src="/assets/images/main-photo.jpg">
<nav id="menu-links" >
<ul class="inline-block">
<li class="mb-4 mt-4 text-white">
<a href="/" class="text-3xl font-light flex" id="homePage">
#include("svgs.home")
Home
</a>
</li>
<li class="text-white mb-4">
<a href="/blogs" class="text-3xl hover:text-3xl flex" id="blogsPage">
#include("svgs.post")
Blogs
</a>
</li>
<li class="text-white mb-4">
<a class="text-3xl mt-2 flex" href="/podcasts" id="podcastsPage">
#include("svgs.microphone")
Podcasts
</a>
</li>
<li class="text-white mb-4">
<a class="text-3xl flex" href="/work">
#include("svgs.laptop")
Work
</a>
</li>
<li class="text-white mb-4">
<a class="text-3xl flex" href="/side-projects">
#include("svgs.projects")
Side Projects
</a>
</li>
</ul>
</nav>
</div>
</section>
<p class="text-xl text-normal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed consequatur praesentium aliquid unde, debitis sit vel velit distinctio eligendi, nesciunt illum totam ad repudiandae. Pariatur dolor totam omnis eos eius ab debitis reprehenderit dicta, quidem, deleniti? Natus consequatur eum vel voluptatem illum doloremque dolores, id voluptatibus quas nam officia cumque dolor in, nobis maiores alias. Repellendus molestias quia nisi voluptas est voluptate ab quam voluptatum! Atque sequi magnam et iure sunt molestias ipsum odit ad repellendus reprehenderit hic temporibus possimus, totam eligendi quas amet accusantium dolores quibusdam dolorem, corrupti placeat perspiciatis animi velit. Odit quisquam ipsum voluptate quibusdam, et, placeat iure dolorum, expedita quia soluta cupiditate. Dicta cupiditate neque minus excepturi consectetur et, exercitationem fugit at enim ex libero. Debitis, omnis modi harum quisquam. Dicta, est esse fuga dolor doloremque architecto velit magnam eos nesciunt et natus ullam quasi error, eligendi. Autem dolorum debitis reiciendis alias atque fugiat aperiam soluta?</p>
I have a section of a site that uses an h2, followed by an accordion. I am trying to have the accordion and h2 pull-left, however the accordion is the wrong size, unless it is expanded in which it enlarges itself. I have a sidebar column set up as so: <div class="col-md-3">
thus I want the h2, and accordion to be to the right of that but take up the full screen on the right of that. My accordion and h2 is set up as follows:
<div class="col-md-9 pull-right">
<div class="panel-body">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
<div class="panel-group col-md-9 pull-left" id="accordion">
with each panel like so:
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Teachers and Support Staff</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- content -->
</div>
</div>
</div>
As I understood your problem, pull-right is causing it. Please see the attached snippets if this is was you need.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-3">
<h3>Sidebar</h3>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro esse officiis ipsa, placeat praesentium laborum rerum iste aspernatur omnis ratione exercitationem eligendi. Soluta id ipsa nisi ex! Cumque, voluptatum laudantium hic, ea cum, vitae aperiam expedita delectus autem iusto nam voluptatem dolorum fugiat? Laudantium minima, eos eius harum voluptatem error!</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
</div>
</div>
<div class="panel-group " id="accordion">
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">Teachers and Support Staff 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos architecto atque nemo nisi explicabo dolor. Magni perferendis modi vero pariatur officia consectetur, vitae id. Aspernatur officia nam ipsum ea dolorum laborum error maxime quidem provident rerum facere eum, unde? Ducimus quos provident adipisci, odit porro itaque eligendi beatae obcaecati tenetur minima officiis libero, nesciunt quidem autem ex cupiditate ratione veniam repellat est consequuntur quibusdam aut suscipit at. Provident quod, dolor quae incidunt vitae non neque, molestiae minus veritatis deleniti eligendi laboriosam blanditiis nostrum eum quia qui voluptas nemo expedita aliquam dolorum nihil. Quas dolor neque voluptatibus quos optio reprehenderit, impedit?
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Teachers and Support Staff 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ex laboriosam libero suscipit natus, voluptatibus, perferendis eos omnis impedit minima fugit a ipsum ipsa rem numquam placeat provident magnam asperiores mollitia vero magni laudantium pariatur. Obcaecati error rem dolor itaque quidem eligendi, voluptas vero voluptatem, labore adipisci perferendis quia velit reiciendis illo libero optio. Aliquam autem labore voluptas veritatis praesentium, in a tempore accusamus error ad laboriosam omnis consequuntur, pariatur dolor voluptates dolores vel. Repellat animi tenetur expedita nobis est a natus hic adipisci eligendi aliquam quo minus, dolorum nihil provident odit delectus suscipit omnis nostrum quod magni, voluptatum. Laboriosam!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Teachers and Support Staff 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatem, itaque cumque dolorem dicta eveniet porro voluptatibus unde ad nostrum est accusantium veniam, iste natus incidunt quis consectetur quod placeat deserunt corporis veritatis quidem! Eaque facilis quasi, rem reiciendis! Voluptatibus quasi, necessitatibus repellendus impedit, fugit minima vero eius, perferendis dignissimos vel nulla velit! Error commodi veniam maxime reprehenderit aut sint voluptatem id culpa autem corrupti optio expedita blanditiis odit dolorem obcaecati vitae delectus ea necessitatibus beatae laboriosam aliquid, eos eveniet nobis quos quidem? Quia itaque dicta quasi perferendis earum, fuga illo aperiam architecto nisi iure suscipit omnis esse facilis, saepe.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am new with Bootstrap and css. Help out a newbie. When it is maximized, I have a layout that I want but when I re-size it to a smaller size, the texts overlaps the images on top of it. Your help is very much appreciated. Here is my code:
<section id="work" class="container">
<div class="page-header">
<h1 class="text-center">My Work</h1>
</div>
<div class="text-center">
<img src="images/portfolio1.jpg" class="img-thumbnail">
<img src="images/portfolio2.jpg" class="img-thumbnail">
<img src="images/portfolio3.jpg" class="img-thumbnail">
<img src="images/portfolio4.jpg" class="img-thumbnail">
<img src="images/portfolio2.jpg" class="img-thumbnail">
<img src="images/portfolio1.jpg" class="img-thumbnail">
</div>
</section>
<section id="about" class="container">
<h2 class="text-center">About Me</h2>
<div class="col-text text-justify">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Web Designing </h4>
</div>
<div class="panel-body text-justify">
<img src="images/webdesign.jpg" class="img-thumbnail center-block">
<p class="lead text-center">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
<div class="panel-footer"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Web Designing</h4>
</div>
<div class="panel-body text-justify">
<img src="images/webdesign.jpg" class="img-thumbnail center-block">
<p class="lead text-center">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
</section>
The issue is that you need to wrap each image in a bootstrap column so that they resize properly without interfering with each other.
<div class="row">
<div class="col-md-6">
<img src="images/portfolio1.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
<img src="images/portfolio2.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
<img src="images/portfolio3.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
<img src="images/portfolio4.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
<img src="images/portfolio1.jpg" class="img-thumbnail">
</div>
<div class="col-md-6">
<img src="images/portfolio2.jpg" class="img-thumbnail">
</div>
</div>