{"id":6295,"date":"2021-05-17T07:12:43","date_gmt":"2021-05-17T07:12:43","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=6295"},"modified":"2022-04-13T16:34:46","modified_gmt":"2022-04-13T16:34:46","slug":"some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/","title":{"rendered":"Some important CSS property for uses in your responsive bootstrap 4 pages"},"content":{"rendered":"\n

How do you change the direction of flex in CSS?<\/strong><\/p>\n\n\n\n

The flex-direction property accepts 4 different values:
<\/p>\n\n\n\n

Property<\/strong><\/td>Description<\/strong><\/td><\/tr>
row (default)<\/td>same as text direction.<\/td><\/tr>
row-reverse<\/td>opposite to text direction.<\/td><\/tr>
column<\/td>same as row but top to bottom.<\/td><\/tr>
column-reverse<\/td>same as row-reverse top to bottom.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

What are the background properties?<\/strong><\/p>\n\n\n\n

All CSS Background Properties
Property Description<\/p>\n\n\n\n

\n
<\/div>\n<\/div>\n\n\n\n
Property<\/strong><\/td>Description<\/strong><\/td><\/tr>
background-image<\/td>Sets the background image for an element<\/td><\/tr>
background-origin<\/td>Specifies where the background image(s) is\/are positioned<\/td><\/tr>
background-position<\/td>Sets the starting position of a background image<\/td><\/tr>
background-repeat<\/td>Sets how a background image will be repeated<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

How do you change position in CSS?<\/strong><\/p>\n\n\n\n

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.<\/p>\n\n\n\n

Property<\/strong><\/td>Description<\/strong><\/td><\/tr>
Move Left<\/td>Use a negative value for left.<\/td><\/tr>
Move Right<\/td>Use a positive value for left.<\/td><\/tr>
Move Up<\/td>Use a negative value for top<\/td><\/tr>
Move Down<\/td>Use a positive value for top.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

What is Z-index in CSS?<\/strong><\/p>\n\n\n\n

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
If you want to create a custom stacking order, you can use the z-index property on a positioned element. The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.<\/p>\n\n\n\n

How do I fix Z-index in CSS?<\/strong><\/p>\n\n\n\n

To sum up, most issues with z-index can be solved by following these two guidelines:
Check that the elements have their position set and z-index numbers in the correct order.
Make sure that you don’t have parent elements limiting the z-index level of their children.<\/p>\n\n\n\n

How do you use sticky position in CSS?<\/strong><\/p>\n\n\n\n

CSS Demo: position<\/strong><\/p>\n\n\n\n

To see the effect of sticky positioning, select the position: sticky option and scroll this container. The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top ), and will then stop scrolling, so it stays visible.<\/p>\n\n\n\n

How do you flex vertically?<\/strong><\/p>\n\n\n\n

Vertical alignment using align-self<\/p>\n\n\n\n

Property<\/strong><\/td>Description<\/strong><\/td><\/tr>
flex-start<\/td>align to the top of the container.<\/td><\/tr>
flex-end<\/td>align to the bottom of the container.<\/td><\/tr>
center<\/td>align at the vertical center of the container.<\/td><\/tr>
baseline<\/td>display at the baseline of the container.<\/td><\/tr>
stretch<\/td>items are stretched to fit the container.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

How do you change the direction of flex in CSS? The flex-direction property accepts 4 different values: Property Description row […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5309],"tags":[5312,5134,2454,5310,5311],"class_list":["post-6295","post","type-post","status-publish","format-standard","hentry","category-css","tag-bootstrap-4","tag-css","tag-important","tag-property","tag-responsive"],"yoast_head":"\nSome important CSS property for uses in your responsive bootstrap 4 pages - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Some important CSS property for uses in your responsive bootstrap 4 pages - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"How do you change the direction of flex in CSS? The flex-direction property accepts 4 different values: Property Description row […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-17T07:12:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:34:46+00:00\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"Some important CSS property for uses in your responsive bootstrap 4 pages\",\"datePublished\":\"2021-05-17T07:12:43+00:00\",\"dateModified\":\"2022-04-13T16:34:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/\"},\"wordCount\":409,\"keywords\":[\"bootstrap-4\",\"css\",\"Important\",\"property\",\"responsive\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/\",\"name\":\"Some important CSS property for uses in your responsive bootstrap 4 pages - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"datePublished\":\"2021-05-17T07:12:43+00:00\",\"dateModified\":\"2022-04-13T16:34:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Some important CSS property for uses in your responsive bootstrap 4 pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Some important CSS property for uses in your responsive bootstrap 4 pages - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/","og_locale":"en_US","og_type":"article","og_title":"Some important CSS property for uses in your responsive bootstrap 4 pages - scmGalaxy","og_description":"How do you change the direction of flex in CSS? The flex-direction property accepts 4 different values: Property Description row […]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/","og_site_name":"scmGalaxy","article_published_time":"2021-05-17T07:12:43+00:00","article_modified_time":"2022-04-13T16:34:46+00:00","author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"Some important CSS property for uses in your responsive bootstrap 4 pages","datePublished":"2021-05-17T07:12:43+00:00","dateModified":"2022-04-13T16:34:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/"},"wordCount":409,"keywords":["bootstrap-4","css","Important","property","responsive"],"articleSection":["CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/","name":"Some important CSS property for uses in your responsive bootstrap 4 pages - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"datePublished":"2021-05-17T07:12:43+00:00","dateModified":"2022-04-13T16:34:46+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/some-important-css-property-for-uses-in-your-responsive-bootstrap-4-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"Some important CSS property for uses in your responsive bootstrap 4 pages"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/6295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=6295"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/6295\/revisions"}],"predecessor-version":[{"id":6296,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/6295\/revisions\/6296"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=6295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=6295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=6295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}