html - Bootstrap - Page Division -
i have started using bootstrap. have got page ready header , footer. want divide container in left , right part.
what can bootstrap way it? page can flexible enough on different devices?
home.jsp
<!doctype html> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>bootstrap home</title> <link rel="stylesheet" type="text/css" href="<c:url value="/views/js/bootstrap/css/bootstrap.css"/>"> <link rel="stylesheet" type="text/css" href="<c:url value="/views/css/home.css"/>"> <script type="text/javascript" src="<c:url value="/views/js/jquery-2.1.1.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/views/js/bootstrap/js/bootstrap.js"/>"></script> <script type="text/javascript"> $(document).ready(function(){ }); </script> </head> <body> <jsp:include page="includes/header.jsp"></jsp:include> <div class="container" style="display: table; width: 100%;padding: 0px;"> <p class="muted-text">this container</p> </div> <jsp:include page="includes/footer.jsp"></jsp:include> </body> </html>
the sum of columns 12 can try this.
<div class="container"> <div class="row"> <div class="col-md-4">left col</div> <div class="col-md-8">right col</div> </div> </div> you can combine classes create more flexible layouts.
- 'xs' (mobile devices)
- 'sm' (small devices tablets)
- 'md' (laptops, medium screen)
'lg' (larger screen)
for more info visit: bootstrap
Comments
Post a Comment