Hi guys been playing around with the bootstrap pannels and trying to understand it all. I am trying to recreate some panels inside other panels.
So for example this website : Website
Is using bootstrap pannels for their recopies. This is what i am trying to recreate with panels however i am not sure how 2 do this.
I have done this so far however it does not look like the one on the website at all
Code:
<div id="mainContainer" class="container">
<div class = "pannels">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
</div>
</div>
<div class="panel panel-default">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
<h4>
List Title
</h4>
<ul class="list-group">
<li class="list-group-item">Item One</li>
<li class="list-group-item">Item Two</li>
<li class="list-group-item">Item One</li>
<li class="list-group-item">Item Two</li>
<li class="list-group-item">Item One</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
Here comes some text
</div>
</div>
</div>
</div>
I am trying to get everything to the right size. So for example my picture tab is not the right size compared to the site and i am having problem recreating it. I also am struggling to shrink the whole window pannel . I am not sure if i should use CSS to do this or bootstrap etc.
Anyway any help on this would be great .
Thanks
Use CSS. So in your head tag add a link to your own CSS file which adds the styles you want. But make sure it is listed after you link the Bootstrap CSS file.
Ex.
<link rel="stylesheet" type="text/css" href="--Bootstrap URL Here--"/>
<link rel="stylesheet" type="text/css" href="myCustomCSSFile.css"/>
Then inside myCustomCSSFile.css put things like:
panel > panel {
height: 50%;
background-color: orange;
}
or whatever styles you want.
Here's a CSS tutorial: W3Schools CSS Tutorial
Related
I designed a sidebar with links and am trying to give space between each of the links ive tried adding
.sidebar-nav>li>a{ padding-bottom: 500px; }
its not adjusting what alternative can be used to adjust this see full code below...
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
<ul class="navbar sidebar-nav">
<li class="active">Reports</li>
<li>Reports</li>
<li>Reports</li>
</ul>
</div>
<div class="col-sm-9 col-md-10"></div>
</div>
</div>
don´t know if it's the solution you're looking for, but adding a:
</br>
before the
<li>
adds a space before the next line. try it!
For my work I had to create a custom homepage for an existing Wordpress website. Since my boss liked my footer I had to implement my own footer in the theme used.
My footer works fine but in mobile version, I can't click on links...
Here is the website: website
Does anyone have an idea ?
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3 text-left footer-column">
<h3>EB Quad</h3>
<ul>
<li>Accueil</li>
<li>Atelier</li>
<li>Occasions</li>
<li>Contact</li>
<li>Livre d'or</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-left footer-column">
<h3>CF Moto</h3>
<ul>
<li>Quads</li>
<li>Buggys</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-right footer-column">
<h3>Randonnées</h3>
<ul>
<a href="https://www.ebquad.be/randonnees/">
<li>Nos randonnées</li>
</a>
<li>Agenda</li>
<li>Photos</li>
<li>Informations/Tarifs</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-right footer-column">
<h3>Informations</h3>
<ul>
<li><a href="https://www.google.com/maps/place/E.b.+Renove/#50.3840829,4.0316377,15z/data=!4m2!3m1!1s0x0:0xe36a2bfccc6eb3da?ved=2ahUKEwj5r93ciZjfAhVQNOwKHfAYCtQQ_BIwDXoECAYQCA" target="_blank" rel="noopener noreferrer">
Route de Beaumont 10<br>
7041 Givry (Mons)</a></li>
<li>info#eri-renove.be</li>
<li>0495/447.304</li>
</ul>
</div>
<!-- .footer-widget-wrap -->
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<div style="font-size:12px; margin:auto; text-align:center;">Site réalisé par:</div>
<a href="http://www.mds-digitalagency.be" class="watermark-link" target="_blank"><img src="https://www.ebquad.be/wp-content/uploads/2018/12/mds_logo.png"
style="width: 64px; margin-bottom:30px;" alt=""></a>
</div>
<div class="footer-bottom-wrap col-md-12">
EB QUAD © Tous droits réservés | Conditions générales
</div><!-- .footer-bottom-wrap -->
</div><!-- container -->
Thanks
Your .footer-bottom-wrap covers the whole footer. Add display: inline-block to this element and all works fine.
Add this css inside your stylesheet
.footer-bottom-wrap {float: left;}
Since your links are float elements they aren't displayed as the normal flow, and your .foote-bottom-wrap elemnt is not a float element this is why this element will cover all of your links.. you can fix it using this class..
.footer-bottom-wrap {
...
overflow:hidden;
}
This property fix this behavior.. you can find a good tutorial to understand float behavior here
Add this in your style.css line number 380 "overflow: hidden;"
It's caused by your css code just try to add
via HTML
<div class="clearfix"></div>
<!--before-->
<div class="footer-bottom-wrap col-md-12">
Or via CSS
.footer-bottom-wrap {
color: #787977;
overflow: hidden;
}
I have a navbar inside the tab-content that has pull-right bootstrap class ,we are rendering element js-property-panel based on user selection so when this element loads it is overlapping on navbar. So both are iniside cols 10. How can i set position of navbar using pull-right when js-property-panel loads it should moved to right ?
main.html
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
<div role="tabpanel" class="active" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="canvas" style="height:80vh;"></div>
<div id="js-properties-panel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Are you looking for a pure css solution? As this can be achieved with
javascript pretty easily.
Also here is a link of css tricks that might be useful to
introduce conditional styling using css.
Update:
Here is how far I could get to- please follow the fiddle here
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content row">
<div class="col-md-6 col-md-push-6 navwrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div role="tabpanel" class="col-md-6 col-md-pull-6" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="js-properties-panel" class="panel-contents">
sample content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Observations:
What you are trying to achieve is controlling the style of an element
higher up the DOM tree using a state an element lower down the tree.
Neither those elements are direct parent-child nor are those siblings
so you could control using common class and may be adding a
:not(:empty) selector.
You could still use the column-ordering to a certain extend though
I've been asked by a friend to create a website.
I've used bootstrap 3 as a framework for the website and have hit a bit of a stumbling block.
My friend wanted a tabbed section where the background image of the section changes depending on which tab is active. I've been able to make it work for just the tab-pane using css, but I need to be able to change the entire section background and not just the tab pane.
I think it will require some JavaScript, but unfortunately my skills in that area a still a bit too weak to know how to do this, and google has been about as helpful as a hole in the head.
below is the section of html that i need the background image to change with each tab
<section id="about" class="content-section text-center">
<div class="row">
<div class="tab-content vertical-center">
<div id="aboutus" class="tab-pane fade in active">
<h2>...</h2>
<p>...</p>
</div>
<div id="history" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
<div id="chef" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 nav-pills-bg">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a data-toggle="pill" href="#aboutus">...</a>
</li>
<li>
<a data-toggle="pill" href="#history">...</a>
</li>
<li>
<a data-toggle="pill" href="#chef">...</a>
</li>
</ul>
</div>
</div>
Any help is appreciated
Put your separate css background images on these:
#aboutus {
background-image:.....
}
#history {
background-image:.....
}
#chef {
background-image:.....
}
I checked your code, all works fine and if you want change only contents background, Carol McKay wrote what you have to add in your code. You don't need in this case any javascript code.
I created small example with your code and bootsrap classes: jsfiddle-link
All gaps you can see depends bootstrap classes, for example, by default class .alert has:
.alert {
padding: 15px;
margin-bottom: 20px;
...
}
And one more example with content below pills and looks more familiar): jsfiddle-link2
Basically Currently I have html code which builds a layout of panels and I want to basically expand and collapse these panels , for some reason when i load the assets and run my app , the panels appear collapsed but does not expand when i click the panel title the code is below , i am using angular js with html5 . if someone can help quick i would appreciate that.
<div class="row clearfix" >
<div ng-repeat="i in ctrl.coreControlpanelItems" class="col-md-12 column" >
<div ng-class="{'panel-primary': hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="panel panel-default animated fadeInUp">
<div class="panel-heading">
<i class="pull-left {{i.icon}}"/>
<h5 class="panel-title">
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">
<a ui-sref="{{i.ref}}">{{i.group}}</a>
</a>
</h5>
</div>
<div ng-show="collapsed">
<div class="panel-body ">
<ul>
<li ng-repeat="s in i.items"><a ui-sref="{{s.ref}}">{{s.name}}<a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
First of all, you have nested a tags in your panel-title element. That's a no-no.
Second, you're can't put ng-model on an a tag.
Third, your panel-title is supposed to expand something but you also have a link inside of it which if clicked on would negate what you're trying to do with the expanding...