I'm wondering how can I center on the page two cols with bootstrap. What I mean I have this:
<header>
....
</header>
<section id="main" role="main">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="main-wrap">
....
</div>
</div>
<aside class="col-sm-3">
....
</aside>
</div>
</div>
</section>
I want to center the <section>...</section> under the header.
Here is the Jsfiddle. So the section main which contain image and search form (left and right side) must be centered on header. Is it possible?
Bootstrap has built in classes to offset the column on the grid.
http://getbootstrap.com/css/#grid-offsetting
col-sm-offset-1
JSFiddle:
http://jsfiddle.net/706bcaxn/8/
Related
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
Once I migrated from Bootstrap 3.3.7 to Bootstrap 4, this issue occurred:
It seems a part of the gap is form the body tag
And the other half is from the html tag
It seems there are huge gap between the footer and the bottom of the page
here is the bottom part of the source code:
</div>
<div id="wrap" class="container body-content">
#RenderBody()
</div>
</main>
<nav id="bottomNav" class="navbar-fixed-bottom">
<footer class="footer">
<div class="footer-top">
</div>
<div class="footer-bottom">
<div class="col-12 col-lg-8 footer-bar-left">
<span>© #DateTime.Now.Year</span>
</div>
<div class="col-12 col-lg-4 d-none">
</div>
</div>
</footer>
</nav>
#Scripts.Render("~/bundles/js/app")
#RenderSection("Scripts", required: false)
I have no idea why there are spaces created.
What's more, the footer should stick to the screen bottom when user scrolls the pages. However, the nav function doesn't work, once we migrated to Bootstrap v4.
Thanks in advance.
Because I don't know most of your HTML code I cannot effectively tell you what is not working, but I had a similar issue on weekend and I got a solution, I edited your code based on my thoughts how it would look like:
<div class="container">
<div class="row">
<main>
<div>
</div>
<div id="wrap" class="container body-content">
#RenderBody()
</div>
</main>
</div>
<div class="row">
<nav id="bottomNav" class="navbar-fixed-bottom">
<footer class="footer">
<div class="footer-top">
</div>
<div class="footer-bottom">
<div class="col-12 col-lg-8 footer-bar-left">
<span>© #DateTime.Now.Year</span>
</div>
<div class="col-12 col-lg-4 d-none">
</div>
</div>
</footer>
</nav>
</div>
</div>
#Scripts.Render("~/bundles/js/app")
#RenderSection("Scripts", required: false)
What did you need to do in order to fix the huge gap?
You must set all the info in a container and then create individuals rows per section.
I got an idea from here:
Bootstrap panel collapse creating gaps
Hopefully, it fixes your problem too.
The answer is straightforward. It is because we added 60px padding to the body tag. If we removed it, the issue is resolved.
What bootstrap container would I use in order for me to centre the text below?
I'm trying to get the text to be centred and I think this has something to do with me picking the wrong container?
JSFIDDLE
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-justified">
<p class="main1">Welcome to my digital portfolio</p>
<p>My name is Liam Docherty</p>
<p>I'm a web developer from London.</p>
</div>
</div>
</div>
</section>
There is a separate class in Bootstrap 4:
.text-center {
text-align: center !important;
}
html:
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Titel</h2>
</div>
</div>
</div>
I'm new to bootstrap and I wonder how can we give an element a full width of the screen? for example I have an <hr>element that I want it width to be take the full screen.
I notice that row is taking -15px margin-left and margin-right, how can we remove that margin without affecting other rows in the website?
Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (See full screen for better view)
HTML:
<div class="row">
<div class="content">
<div class="container">
<h1>Welcome to my website!</h1>
</div>
<div class="container-fluid">
<hr>
</div>
</div>
</div>
Thanks!
You simply have to put it out of the container.
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
<hr> <!----- here -->
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>