I'm using Bootstrap for the first time.
Trying to learned the grid-system of push and pull.
<header>
<!-- Main component for a primary marketing message or call to action -->
<div class ="container">
<div class = "row">
<div class = "col-xs-12 col-sm-8">
<h1>RSisdtorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div >
<div class = "col-xs-12 col-sm-4">
<h1> hello brother</h1>
</div>
</div>
</div>
</header>
It does not change the html page at all.
is it necessary to include whole code to look at the problem?
Check out this example from the bootstrap documentation: http://getbootstrap.com/css/#grid-example-mixed
The way you are using the grid classes, your divs will be full-width on xs screens, but on sm screens, the top div will be two-thirds width and the second will be one third width. Anything bigger than a small screen will be reflect this division.
If you are using Chrome, open the Developer Tools and resize your page, making it smaller, and you will see the change.
Bootstrap has a different class syntax for push and pull, read the syntax here: http://getbootstrap.com/css/#grid-column-ordering
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
I am trying to find a way to make bootstrap grid more fluid in showing information.
this is the code I am using now.
<div class="container-fluid">
<div class="row design">
<div class="col-lg-4 wow fadeInUp">
<img src="assets/images/projects/traverse/01.jpg" class="imgs">
</div>
</div>
</div>
but after having like 5-10 of these, the result is something like this.
how can I fill that empty spot in there? the pics I am uploading are not of the same parameters.
or when it is an empty spot, how to add make the grid more responsive and fill the empty parts in there?
I am using only css and html, but don't mind javascript or something else as long as it gets the ob done
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
First off, I am new to css / wordpress etc so not very experienced.
I need help with card layouts. I want this to have the same layout as this, as in I want the cards to be in 2 columns instead of a 1. Messed around with the code a lot and can't seem to get it...
Would post pastebins but <10 rep so can't post >2 links.
EDIT: see comments for pastebins and more info.
Thanks in advance!
First of all i tell you we need your code sample to help you.
I will explain how to do it with bootstrap framework
You can have something like this:
<div>Business Strategy</div>
<div>Boosting Company</div>
<div>How High Growth...</div>
<div>Uk Company Dashboard</div>
You have to import the bootstrap CDN you can get it on this link:
http://getbootstrap.com/getting-started/
After that you will apply a colum grid in the clases of your divs and surround all of them in a "row" div it will look like this:
<div class="row">
<div class="col-xs-12 col-sm-6" >Business Strategy</div>
<div class="col-xs-12 col-sm-6">Boosting Company</div>
<div class="col-xs-12 col-sm-6">How High Growth...</div>
<div class="col-xs-12 col-sm-6">Uk Company Dashboard</div>
</div>
With that classes you are telling the browser that the divs will be displayed as full width when the screen viewport is less than 700px and half width when the viewport is higher.
This is the easyest way for begginners, I recommend you to read the bootstrap tutorial on W3CSchools it will help your first steps in the resposives frameworks
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Here is the explanation about why you should use that classes
Good Luck!
I just placed an image in the 'about me' section of my main page and am not able to change the border radius of the image without all the other images changing as well..
CSS:
.well .col-lg-12 .about, img {
border-radius: 50%;
}
HTML:
<div class="well">
<div class="row">
<div class="col-lg-12">
<img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
<h3>Hello! I'm Jennifer.</h3>
<p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
Read More
</div>
</div>
Demo
This is the result of the code I currently have:
A couple of things wrong that you should consider.
DO NOT STYLE IDs - IDs can't be cascaded and they are unique. This means if you wan to share your styles, you can't because you attached it to an ID instead of a class which you can reuse.
For example: You can't have two DIVs with ID about. But if you wanted both DIVs to act the same way, now you are going to have to repeat the CSS rule for both DIVs. Instead, you create a myClass, style it, and repeat the class wherever you want as much as you want. --- Scalability & Maintainability
DO NOT STYLE BOOTSTRAP CLASSES - Some Bootstrap classes, specially col-* classes, shouldn't be styled or considered in your specificity. This creates a problem because your style will only work for as long as you want it to be col-lg-12. If you decide to change the class to make it respond, your specificity failed. Instead cascade a custom class and use it as a hook of your specificity.
For example, You styled your specificity .col-lg-3 .myClass{something} But decided later that col-lg-3 was too big. So you change it to col-lg-2. Now you have to go to the CSS and change that specificity to .col-lg-2 .myClass{something}...Double work. If you leave bootstrap class out of it, you only change the HTML architecture and nothing else
This is what I would do if I were you:
<div class="col-lg-12 myClass">
<img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
<h3>Hello! I'm Jennifer.</h3>
<p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
Read More
</div>
And your CSS
.myClass img.about {
border-radius: 50%;
}
DEMO
Give the image an id tag and just use that id in the CSS. This way, you only are targeting that specific image, and not the others:
https://jsfiddle.net/32nydcjw/
HTML:
<!-- About Me Well -->
<div class="well">
<div class="row">
<div class="col-lg-12">
<img id="aboutMeImg" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
<h3>Hello! I'm Jennifer.</h3>
<p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
Read More
</div>
</div>
</div>
CSS:
#aboutMeImg {
border-radius: 50%;
}