I am using 3 columns inside a nested row.
instead of stacking horizontally columns are stacking vertically.
this is my code.
i have tried stackoverflow answers but not working.
<div class="jumbotron mainBar">
<div class="container mainBarContainer">
<div class="row">
<div class="col-xs-2">
<div class=" profilePic">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div class="col-xs-4">
<h1>Hello, world!</h1>
</div>
<div class="col-xs-6 container">
<div class="row">
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the fiddle
fiidle
You have a spieling mistake. Change the clas to class which is inside second container.
The demo
Related
i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:
You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>
Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>
how to do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
I am trying to generate the following layout in bootstrap 3 css but the side bar is always small and it does not properly scale up and there is issues in mobile mode how do I proceed. thanks in advance.
Note:
this is what I tried
<div style="display:table;height:100%;width:100vw">
<div style="display:table-row-group;height:100%;width:100vw">
<div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div>
<div class="col-sm-10 col-md-10 col-lg-11half">
<div id="prdgrid">
<breadcrumbs path=prd.path ></breadcrumbs>
<div class="row" style="width: 100%;height:100%">
<div class="leftcol">
<div class="infotile" style="height: 25%;">
<infotile></infotile>
</div>
<div class="detail" style="height:31%">
<details></details>
</div>
<div>
<match></match>
</div>
</div>
<div class="rightcol" style="height:100%">
<div class="pricetile hidden-xs">
<pricechart></pricechart>
</div>
<div class="rightbottomcol" style="height:51%">
<div class="rev">
<div class="title">
<tile></tile>
</div>
</div>
<div class="rev" style="height: 100%;">
<pd></pd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to use Bootstrap Grid and Panel for Same Layout instead of Creating own CSS layout. Refer Link : https://getbootstrap.com/examples/grid/ and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
This is what your code should look like:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2"></div>
<div class="col-md-6"></div>
</div>
</div>
I cant seem to see why the content below is not going into the box which it's inside as defined within the HTML
This is the image because I do not have enough rep yet to add it to the formatting http://i.stack.imgur.com/A3nWx.png
This is the HTML which I am using
<div class="row">
<div class="col-md-4">
<div class="block">
<div class="block-title">
<h2>Title</h2>
</div>
<div class="box-body">
<div class="col-md-1">
<h4>Server 1</h4>
<span class="label label-success">Online <i class="fa fa-check"></i></span>
</div>
</div>
</div>
</div>
</div>
Option 1
Looking at your code, I suppose you are using Twitter Bootstrap.
From you code you have the column <div class="col-md-1"> class inside the outer column <div class="col-md-4">.
For example:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-1">
</div>
</div>
</div>
</div>
</div>
</div>
Please note that bootstrap requires that you wrap a columns with a <div class="row"> so as to clear the float.
Option 2
You could add clear: both; in the class .box-body in your css code. It will clear the column float.
md_5 Hi there. Looks like you are wanting to have the title have it's own area from the box-body.
How about something like this example.
I use some color to show each block.
Here is the Fiddle.
<div class="container col-xs-6 block1">
<div class="row">
<div class="col-md-4">
<div class="block-title bg-primary">
<h2>Title</h2>
</div>
<div class="box-body col-md-12 bg-info">
<h4>Server 1</h4>
<span class="label label-success">Online <i class="fa fa-check"></i></span>
</div>
</div>
</div>
</div>
To fix this I added the clearfix class. Thanks for reminding me, Math4w.
Here is a link to some documentation regarding the clearfix class: http://getbootstrap.com/css/#grid-responsive-resets
So the final code looked like this,
<div class="row">
<div class="col-md-4">
<div class="block">
<div class="block-title">
<h2>Servers</h2>
</div>
<div class="clearfix">
<div class="col-md-4">
<p class="well text-center">
<strong>Server 1</strong>
</br>
<span class="label label-success"><i class="fa fa-check">Online</i></span>
</p>
</div>
</div>
</div>
</div>
</div>