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>
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>
I have an angular application which included UI-Bootstrap and I have an issue with responsiveness.
Index.html:
<body>
<div ng-include="'partials/common/loginHeader.html'" ng-show="!userInfo"></div>
<div ng-include="'partials/common/userHeader.html'" ng-show="userInfo"></div>
<div class="main">
<div class="main-inner">
<div class="container" ui-view>
</div>
</div>
</div>
<!--<div ng-include="'partials/common/footer.html'"></div>--> <!-- footer -->
</body>
</html>
Partial view:
<div class="row">
<div class="span6">
<div class="widget widget-nopad">
<div class="widget-header">...Content inside DIV...</div>
<div class="widget-content">...Content inside DIV...</div>
</div>
</div>
<div class="span6">
<div class="widget>...Content inside DIV...</div>
<div class="widget widget-table action-table">
<div class="widget-header">...Content inside DIV...</div>
<div class="widget-content">...Content inside DIV...</div>
</div>
</div>
</div>
I am just showing the DIV structure in my partial view. The webpage looks normal in normal laptop view. But with increase in height and width of the screen, the content inside the <div class="row"> remains same and leaves a huge space outside it blank.
How can i alter the <div class="row"> so that it will stretch and make use of the blank space inside <div class="main">?
I will add more pictures to get a clear understanding of DIV's (DIV's have been highlighted in blue)
Div.main-inner :
Div.row :
In normal laptop resolution :
I want to reduce jumbotron's height not with pixels but percentage of something (ex. div's height, windows height). What is the best way to do it appropriate with different window sizes and responsive design.
Here is my code:
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<!-- START PAGE CONTENT -->
<div class="content">
<div class="social-wrapper">
<div class="social " data-pages="social">
<!-- START JUMBOTRON -->
<div class="jumbotron" data-pages="parallax" data-social="cover">
<div class="cover-photo">
<img alt="Cover photo" src="assets/img/social/cover.png" />
</div>
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
<div class="inner">
<div class="pull-bottom bottom-left m-b-40">
<h5 class="text-white no-margin">Team Members</h5>
<h1 class="text-white no-margin"><span class="semi-bold">Lemp</span> Team</h1>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
</div>
<!-- END PAGE CONTENT -->
Thanks.
You can make the jumbotron maintain aspect ratio.
Check Sean Dempsey fiddle.
Just modify
<div class="box sixteen-nine">
<div class="content">
<span>16:9</span>
</div>
to your jumbotron
You can see Chris Coyer full explanation
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
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>