I am new with Bootstrap 3 and just want to know how can I use .container class from Bootstrap with my own fixed wrapper.When I have fixed container of the page for example
.wrapper {
width:960px;
}
and .container class from Bootstrap, how can I combine and use in my web page ?
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div> </div> </div> </div>
is it correct ?
Thanks!
no need for the extra div. You could just do
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div>
</div>
</div>
.wrapper {
max-width: 960px;
}
Note that I used max-width in stead of width, or the responsiveness would be lost.
Related
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.
The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.
https://jsfiddle.net/gokcLvtv/7/
<div class="container">
<div class="row header">
<div class="col-xs-6">
Title
</div>
<div class="col-xs-6 text-right">
LOGO
</div>
</div><!-- Header-->
<div class="row main">
<div class="col-xs-8">
<div class="well">Panel One</div>
</div>
<div class="col-xs-4">
<div class="well">Panel Two</div>
<div class="well">Panel Three</div>
</div>
</div><!--main-->
<div class="row footer">
<div class="col-xs-12">© Copyright 2016</div>
</div><!--footer-->
</div><!--container-->
As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.
You can use the vw value for horizontal and vertical resizing.
For example
HTML
<div class="main">
<div class="well">
Panel one
</div>
</div>
CSS
.main {
border: 1px solid red;
height: 75vw;
}
.well {
width: 30vw;
height: 30vw;
margin: 1vw;
}
It's easy to translate from px to vw. Every 1 vw is 10 pixels.
Thanks for your help with the vw ... I have managed to achieve this using vh for the height..
I have created an example for anyone who would like to use this in the future - here
Using the same layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">Header</div>
</div>
</div>
<!-- main -->
<div class="row">
<div class="col-xs-8 main">
<div class="well">
Main Panel
</div>
</div>
<div class="col-xs-4 side-bar">
<div class="well">
Side Panel One
</div>
<div class="well">
Side Panel One
</div>
</div>
</div>
<!-- Footer-->
<div class="row">
<div class="col-sm-12">
<div class="well">Hello</div>
</div>
</div>
</div>
You will just have to play around with the heights to get it to the screensize that works for you.
A picture is worth a thousand words so...
Structure:
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 text-center column-fix">
<div class="row-fluid">
<div class="row-fluid">
<div class="image">
<img src.... />
</div>
</div>
<div class="row-fluid">
<div class="category-link">
<a href...></a>
</div>
</div>
</div>
</div>
...
</div>
Output:
Basically, when a column is higher than the others, it causes the order to break. I understand this is how floats work, but I need a nice and clean solution for this. At the moment, this is my workaround:
.column-fix {
float: none !important;
display: inline-block !important;
margin: 0 -0.125em !important;
vertical-align:top;
}
And this is the output I get with the fix:
Is there a nice solution that will override all columns in all widths without setting a custom class to every element? I want the bootstrap col-* classes to behave like inline-blocks instead of floats.
I am using bootstrap fluid layout. The layout I desire is as follows:
My html code
<div class="container">
<div class="row-fluid">
<div class="span4 well">span4</div>
<div id="h" class="span8 well ">span8</div>
</div>
<div id='calendar' ></div>
</div>
It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.
The solution I tried
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div class="span4 well ">span4</div>
</div>
<div id='calendar' ></div>
</div>
It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.
How can I do that?
Try adding this style:
#x{
margin-left: 0px;
}
And updating your html to:
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div id="x" class="span4 well">span4</div>
</div>
<div id='calendar' ></div>
</div>
The id is just trumping this portion of the Bootstrap css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
I'm laying out a login screen, and on that screen will be just a box with LOGIN and PASSWORD. I need to centralize vertically and horizontally (like any traditional login screen).
How can I achieve this with Twitter Bootstrap?
Thanks!
If you are using bootstrap grid, then you can offset your columns:
<div class="row">
<div class="span6 offset3">
Your content goes here
</div>
</div>
See example here: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
Or you can just use CSS to simply center block element,
div.login-box{
margin:0 auto;
width: 720px;
}
UPDATE to Johny's answer: For Bootstrap 3; the syntax is a bit different:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
or: better yet:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
</div>