I am new to using Twitter Bootstrap and I can't wrap my head around their idea of grid organization. Basically I want to arrange this page with the right set of information colspaning the left. I tried nesting the information with rows, and just kept nesting until I got lost. In the example with JSfiddle below, the table looks fine when the window is wide enough but when you shorten the width of the window the pieces stack out of order. Right 1-6 should stack together (if they must stack at all). Thanks in advance.
http://jsfiddle.net/wBg8Y/
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Actually, I was over thinking it. Solved. Wrapping the left section in helped segregate it from the right.
change to:
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Seems to be working:
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Related
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
I am trying to extend the last card-footer to fill the rest of the space if it doesn't have any buttons. I am tried a number of flex combinations without much luck.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-4 mb-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
</div>
</div>
</div>
</div>
You could try the following (a part of the solution was retrieved from this answer):
.card {
height: 100%;
}
.card-body {
flex: 0 1 auto !important;
}
.card-footer.text-center {
flex: 1;
}
I have created a small fiddle showing the result:
Does Bootstrap support displaying grid columns or rows in Carousel instead of carousel-item -s? The idea is to have a complex grid column structures that interchange with each other just like carousel-items. For example if we have the following grid:
<div class="container">
<div class="row" id="row1">
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
</div>
<div class="row" id="row2">
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
</div>
<div class="row" id="row3">
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
</div>
</div>
I would like to be able to represent row1, row2 and row3 divs as carousel-items.
Or perhaps if carousel-item supports having nested grid elements within its container I can simply wrap the grid hierarchy within the carousel-item ?
The Bootstrap 4 carousel still needs the carousel-item class to work, but it can be tweaked to work along with the grid columns. Just contain the row>col in each carousel-item...
https://www.codeply.com/go/ojz5BDpOej
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item py-5 active">
<div class="row">
<div class="col-sm-6">slide 1</div>
<div class="col-sm-6">slide 2</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">slide 3</div>
<div class="col-sm-6">slide 4</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">slide 5</div>
<div class="col-sm-6">slide 6</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">slide 7</div>
<div class="col-sm-6">slide 8</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm developing an app mainly in HTML5/CSS/JS and I'm using framework7. Following the tutorials and all the documentation available I can't make a side panel appear... What am I doing wrong?
<body>
<div class="panel-overlay">
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Menu de Opções</p>
<p>Fechar Menu</p>
</div>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only open-panel" data-panel="left">
<i class="icon icon-bars"></i>
</a>
</div>
<div class="center">Home</div>
<div class="right"> <a href="#" class="link icon-only">
<i class="icon icon-back"></i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Menu</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I'm testing on Chrome, but nothing is happening... It is also not working on IE
New to bootstrap - have problem with carousel image going over text in nested columns below it. Structure is as follows - not sure why its overlapping nested columns
Would be very grateful for any advice / help
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
<h1 id="logo">test</h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-9 col-xs-9 brownbg">
<div class="row">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand"></span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/photos/1.jpg" width="771" height="292">
</div>
<div class="item">
<img class="second-slide" src="images/photos/2.jpg" alt="Homeopathy 2">
</div>
</div>
</div><!-- /.carousel -->
</div>
<h2 id="logo2">text</h2>
<div id="menu-line"><!-- -->
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
</div>
<div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 brownbg" id="C1">
text here
<img src="images/img1.png" width="163" height="55" alt=" " style="margin: 20px 0 0 0;" />
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-3"></div>
<div class="col-lg-3 col-md-3 col-sm-9 col-xs-9 brownbg" id="C2">
<div style="border-bottom: 2px dashed #000;margin-top:30px;padding:20px 10px;">
<p class="cyan large">Text</p>
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
</div>
<div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 footerbg" id="C3">
text
</div>
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-3"></div>
</div>
</div>
</div>